Add Phone Number & Email Links to Header Bar or Banner Above Header Bar

Hi @tuanphan,

Yes, I think so. I subscribed to Browserstack on the freelance plan for one month to troubleshoot.

In the end I added multiple breakpoints to the CSS.

Thanks for checking!

Hello, 

I am trying to align this to the top right of the site and I am having issues with it. Any help would be greatly appreciated. 

http://www.sgtguides.com

 

<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>

On 1/11/2023 at 1:09 AM, Styledent said:

Hello, 

I am trying to align this to the top right of the site and I am having issues with it. Any help would be greatly appreciated. 

http://www.sgtguides.com

 

<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>

 

Hi,

I see you figured it out?

On 1/14/2023 at 9:43 AM, tuanphan said:

Hi,

I see you figured it out?

Hello, 

No, I still haven't figured this out. Could you please assist? I have it removed temporarily, but I am trying to align it to the top right of the website, but I want the phone number and language switcher to be stacked: one above the other. 

On 1/17/2023 at 12:42 AM, Styledent said:

Hello, 

No, I still haven't figured this out. Could you please assist? I have it removed temporarily, but I am trying to align it to the top right of the website, but I want the phone number and language switcher to be stacked: one above the other. 

Hi,

Can you add code to the site? We will check it again

If the site is live, you can also duplicate the site & add there, we can check there then you transfer code to main site then

On 1/18/2023 at 8:35 PM, tuanphan said:

Hi,

Can you add code to the site? We will check it again

If the site is live, you can also duplicate the site & add there, we can check there then you transfer code to main site then

Hello, 

I duplicated our website so you can see the issue that I am having with this code. I would like to align it to the top right side of the header. I added the screenshot below of how it looks. 

 

<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>

On 1/20/2023 at 11:24 PM, Styledent said:

Hello, 

I duplicated our website so you can see the issue that I am having with this code. I would like to align it to the top right side of the header. I added the screenshot below of how it looks. 

 

<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>

What is duplicated site url?

On 1/26/2023 at 3:14 AM, tuanphan said:

What is duplicated site url?

Please try this: 

http://mushroom-azalea-esy5.squarespace.com

15 hours ago, Styledent said:

Please try this: 

http://mushroom-azalea-esy5.squarespace.com

Thank you. The site is private. Can you set up an access password?

On 1/28/2023 at 4:16 AM, tuanphan said:

Thank you. The site is private. Can you set up an access password?

 

TuanPhan, please try it again: 

https://mushroom-azalea-esy5.squarespace.com/

Password: test123456

On 1/30/2023 at 10:18 PM, Styledent said:

TuanPhan, please try it again: 

https://mushroom-azalea-esy5.squarespace.com/

Password: test123456

Hi,

Can you check password?

On 2/2/2023 at 8:21 AM, tuanphan said:

Hi,

Can you check password?

Hello Tuanphan, 

Can you please still assist?

https://horse-coconut-l7d7.squarespace.com/

Password: Test123456$

On 2/17/2023 at 2:32 AM, Styledent said:

Hello Tuanphan, 

Can you please still assist?

https://horse-coconut-l7d7.squarespace.com/

Password: Test123456$

Add to Design > Custom CSS

ul.sc-topnav {
    text-align: right;
    padding-right: 2vw;
}

On 2/21/2023 at 4:17 AM, tuanphan said:

Add to Design > Custom CSS

ul.sc-topnav {
    text-align: right;
    padding-right: 2vw;
}

 

Thank you so much for your patience and help! That worked!