Jump to content

Need to align the phone number and language switcher on the website header

Recommended Posts

Hello, 

I am trying to align this to the top right of the site and I am having issues with it. I can set it to :block but it won't align it to the right. I would like them to appear stacked. Any help would be greatly appreciated. 

Website: https://www.sgtguides.com/

I got this code from this post: 

 

<ul class="sc-topnav">
  <li><a href="/en/home" class="lang-en">English</a> | <a href="/fr/home/" class="lang-es">Français</a></li>
  <li><a href="tel:407-676-7171">CALL US (407)676-7171</a></li>
</ul>
<style>
  .sc-topnav {
    list-style-type: none;
    display: block;
    flex-flow: column wrap;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0vw;
    justify-content: right;
    align-content: flex-end;
    background: #ffffff;
}
  .sc-topnav a {
    letter-spacing: .03em;
    font-family: Rubik;
    font-size: 0.8em;
    font-weight: 400;
    color: #000000;
    line-height: .5vw;
}
</style>
Edited by Styledent
Correction
Link to comment
  • Replies 1
  • Views 139
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.