[Share] Secondary Navigation with Text/Phone (Icon)/Address (Icon)

In this post, I will share how to create a secondary navigation (above header) with layout like this.

If you can't make it work, you can send site url in comment or message me, I can check easier.

#1. First, you need to enable Announcement Bar.

#2. Next, add 3 text like this

#3. Highlight phone text >> Add a phone number with this format

tel:0123456789

and highlight address >> Add this symbol to URL

#

#4. Edit Site Footer > Add a Code Block > Paste this code

(Note: Code Block is available in Personal Plan, and this code can run on Personal Plan)

If you use a Business Plan or higher, you can use code to Code Injection > Header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

#5. Use this code to Custom CSS to add Phone/Address Icons before Phone/Address text.

The code also remove underline from Phone/Address.

div#announcement-bar-text-inner-id {
   /* remove links underline */
  p a {
    text-decoration: none !important;
}
  /* Phone */
  p a[href*="tel"]:before {
    content: "\f095";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    margin-right: 5px;
    margin-left: 20px;
}
  /* Address */
  p a[href="#"]:before {
    content: "\f3c5";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    margin-right: 5px;
    margin-left: 20px;
}
}

You will have this.

#6. To make them align right, you can use this CSS code

div#announcement-bar-text-inner-id p {
    text-align: right;
  }

#7. To stacked 3 texts on mobile, use this code 

div#announcement-bar-text-inner-id {
  @media screen and (max-width:767px) {
    p a {
      display: inline-block;
    }
    p {
      line-height: 22px;
    }
  }
}

#8. To change the Announcement Bar background, you can change the Site Style.

#9. To remove the Announcement Bar X Close icon, you can use this CSS code

span.sqs-announcement-bar-close {
    display: none;
}

Is there any way for the content in the second navigation to be split...some items on the left and some on the right? Thanks.

6 hours ago, MColeman said:

Is there any way for the content in the second navigation to be split...some items on the left and some on the right? Thanks.

Yes, we can use some CSS float to do this. You can share link to your site, I can check & give code easier.

Thanks. Currently I have the second navigation set up with Will Myers code (here), but then I saw your suggestion of using the announcement bar. I can change it to the announcement bar if you think that is better with less CSS overall to make it happen. I mainly chose the Will Myers code so I could hide it on mobile. Regardless, the website is pronet.squarespace.com, password is honeyroad. I was hoping for the phone on the left and the links on the right. Thanks for the help!

43 minutes ago, MColeman said:

I have the second navigation set up with Will Myers code. I was hoping for the phone on the left and the links on the right.

@MColeman Add this to the end of Custom CSS:

/* Align first subnav item to the left */
#wm-subnav .header-nav-item:first-of-type {
  margin-left: .8vw;
  margin-right: auto;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you!