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

Site URL: https://finch-plane-n82h.squarespace.com/

I am a coding novice so please forgive me if this is a very simple fix!

I would like to add my client's phone number and email address as clickable links either at the top of the header bar or in a separate banner above the header bar. How can I add do this?

I tried adding the below code to the header section of Code Injection for the phone number, which I found on an earlier forum post, but when I hit "save" I see the number flash at the top of the header but then it disappears:

<div style="text-align: right;"><b>Contact Us at <a href="tel:555-555-5555">555-555-5555</a></b></div>

Thank you in advance for your help!

No problem. You can do this without code. It's built into your dashboard.

In your dashboard, go to Pages, then click the + in your Main Navigation. Add a link.

Enter the phone number you want the link to display as, and for the address enter "tel:1234567890" but obviously change the telephone number. Repeat this process with the email address, but for its link, type "mailto:me@you.us", and again change the email to the appropriate address.

Thank you for the info! I was hoping to add the phone number and email address above the main nav. Is that possible with this method? I gave it a try and it shows up as a menu option, which is not what the client is looking for. Thank you!

Interested to know how you achieved this?

3 hours ago, cohdig said:

Interested to know how you achieved this?

Have you tried using Announcement bar yet?

On 4/24/2022 at 6:17 PM, tuanphan said:

Have you tried using Announcement bar yet?

Ok I see, and did you then use CSS to customise the colour of background and text?

5 hours ago, cohdig said:

Ok I see, and did you then use CSS to customise the colour of background and text?

Yes. You can send, we can give the CSS code

16 hours ago, tuanphan said:

Yes. You can send, we can give the CSS code

Thank you. This could be an option if I don't find a solution about how to add another navigation bar above the primary navigation in 7.1. 

OP: How did you do it? I've been trying to do that and add a "Made in America" statement, but looks like they figured it out.

On 5/3/2022 at 3:21 AM, SnellVentures said:

OP: How did you do it? I've been trying to do that and add a "Made in America" statement, but looks like they figured it out.

They added this code to Code Injection > Footer

(If you use Personal Plan > Edit Site Footer > Add a Code Block)

<ul class="kl-topnav">
  <li><a href="tel:510-662-1400">CALL US (510) 662-1400</a></li>
  <li><a href="mailto:info@bayareapropane.com">EMAIL US info@bayareapropane.com</a></li>
</ul>
<style>
  .kl-topnav {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 1vw;
    justify-content: center;
    align-content: space-evenly;
    background: #fff;
}
  .kl-topnav a {
    letter-spacing: .03em;
    font-family: alternate-gothic-no-3-d;
    font-size: 1.7em;
    font-weight: 400;
    color: #262262;
    line-height: .5vw;
}
</style>

Wow! This is EXACTLY what I've been looking for. My client wants to be able to show phone number and quote page without clicking on the navigation. Neither the announcement bar or mobile information bar are quite right. This looks perfect, but I can't make it work. I tried using your code on my site, but didn't work. This is the site: https://www.supercubes.com/.  What am I doing wrong? Thank you!!!

<ul class=“sc-topnav">
  <li><a href="tel:877-374-5452>CALL NOW (877) 374-5452</a></li>
  <li><a href=“https://www.supercubes.com/quote”>REQUEST PRICING</a></li>
</ul>
<style>
  .sc-topnav {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 1vw;
    justify-content: center;
    align-content: space-evenly;
    background: #000;
}
  .sc-topnav a {
    letter-spacing: .03em;
    font-family: Roboto;
    font-size: 1.7em;
    font-weight: 400;
    color: #fff;
    line-height: .5vw;
}
</style>

On 5/18/2022 at 4:00 AM, nwhittlesey said:

Wow! This is EXACTLY what I've been looking for. My client wants to be able to show phone number and quote page without clicking on the navigation. Neither the announcement bar or mobile information bar are quite right. This looks perfect, but I can't make it work. I tried using your code on my site, but didn't work. This is the site: https://www.supercubes.com/.  What am I doing wrong? Thank you!!!

<ul class=“sc-topnav">
  <li><a href="tel:877-374-5452>CALL NOW (877) 374-5452</a></li>
  <li><a href=“https://www.supercubes.com/quote”>REQUEST PRICING</a></li>
</ul>
<style>
  .sc-topnav {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 1vw;
    justify-content: center;
    align-content: space-evenly;
    background: #000;
}
  .sc-topnav a {
    letter-spacing: .03em;
    font-family: Roboto;
    font-size: 1.7em;
    font-weight: 400;
    color: #fff;
    line-height: .5vw;
}
</style>

Your code missing some symbol. It should be

<ul class="sc-topnav">
  <li><a href="tel:877-374-5452">CALL NOW (877) 374-5452</a></li>
  <li><a href="https://www.supercubes.com/quote">REQUEST PRICING</a></li>
</ul>
<style>
  .sc-topnav {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 1vw;
    justify-content: center;
    align-content: space-evenly;
    background: #000;
}
  .sc-topnav a {
    letter-spacing: .03em;
    font-family: Roboto;
    font-size: 1.7em;
    font-weight: 400;
    color: #fff;
    line-height: .5vw;
}
</style>

I tried the code above but my contact information just shows up on the bottom of the page. Can someone help me?

Website: https://ensodental.com

Screenshot for reference:

On 6/5/2022 at 12:20 PM, EnsoDental said:

I tried the code above but my contact information just shows up on the bottom of the page. Can someone help me?

Website: https://ensodental.com

 

Screenshot for reference:

Can you add it again? It doesn't show nothing here

Hello,

Thanks for this @tuanphan!

This was working great for me when I had the header set to dynamic. Now I've changed it to solid and seems to be covering up the phone number bar. Any ideas?

https://kale-accordion-xesr.squarespace.com/

Password: Claud

Thank you

On 9/6/2022 at 12:26 PM, Chloe_ECD said:

Hello,

Thanks for this @tuanphan!

This was working great for me when I had the header set to dynamic. Now I've changed it to solid and seems to be covering up the phone number bar. Any ideas?

https://kale-accordion-xesr.squarespace.com/

Password: Claud

Thank you

Can you change to solid? We can check easier

Hi @tuanphan,

Sure thing, I have set the header to solid now, any idea why it covers up the phone number?

https://kale-accordion-xesr.squarespace.com/

Password: Claud

Thanks for your help!

I ended up adding, position: relative . Not sure if that was the right thing to do.

Quote

 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">

<ul class="sc-topnav">
  <li><i class="fas fa-phone"></i><a href="tel:1300-114-093">1300 094 093</a></li>
</ul>
<style>
  .sc-topnav {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-right: 4vw;
    justify-content: right;
    align-content: space-evenly;
    background: #0177bc;
    z-index: 20;
  }
  
  .sc-topnav a {
    letter-spacing: .03em;
    font-size: 1.7em;
    font-weight: 400;
    color: #fff;
    line-height: .5vw;
  }
  
    .sc-topnav i {
    color: #fff;
    letter-spacing: 0.5em;
}
</style>

 

Ideally I would like the phone number to line up with the last item on my nav better.

On 9/13/2022 at 1:40 PM, Chloe_ECD said:

I ended up adding, position: relative . Not sure if that was the right thing to do.

Ideally I would like the phone number to line up with the last item on my nav better.

It looks like you solved this?

I did @tuanphan.

Now the client wants to put the logo up there as well 😅, similar to https://www.exopest.com.au/ .

So the logo would be up in the blue bar and not in the white bar.

I don't suppose you have any idea on how to do this?

https://kale-accordion-xesr.squarespace.com/

Password: Claud

11 hours ago, Chloe_ECD said:

I did @tuanphan.

Now the client wants to put the logo up there as well 😅, similar to https://www.exopest.com.au/ .

So the logo would be up in the blue bar and not in the white bar.

I don't suppose you have any idea on how to do this?

https://kale-accordion-xesr.squarespace.com/

Password: Claud

Move it to this, in right of blue bar?

Hi @tuanphan,

Thanks for your help, like the attached!

I have sort of hacked it but now apparently it's not working in Safari. The blue menu bar is only showing up as a thin blue strip and you cannot see the menu item, according to the client. 

Any idea how to trouble shoot that, without owning a Mac?

https://kale-accordion-xesr.squarespace.com/

Password: Claud

Note: there is only one menu item now which looks confusing but I will be adding more.

8 hours ago, Chloe_ECD said:

Hi @tuanphan,

Thanks for your help, like the attached!

I have sort of hacked it but now apparently it's not working in Safari. The blue menu bar is only showing up as a thin blue strip and you cannot see the menu item, according to the client. 

Any idea how to trouble shoot that, without owning a Mac?

https://kale-accordion-xesr.squarespace.com/

Password: Claud

Note: there is only one menu item now which looks confusing but I will be adding more.

The easiest way is you add a phone number to navigation, then we will give the code to float it right.

Do you use Personal or Business? If Business Plan, we will use code to move phone number into blue bar

With Mac error, I usually use this tool: https://www.browserstack.com/

However, my account has expired, so I can't help you check this.

Thanks @tuanphan,

I have checked out browserstack. I might just have to bite the bullet and subscribe for a month.

On 10/5/2022 at 12:11 PM, Chloe_ECD said:

Thanks @tuanphan,

I have checked out browserstack. I might just have to bite the bullet and subscribe for a month.

Have you solved it yet or still need help?