Creating a secondary navigation menu above the main navigation menu

Hello SS community!  I am looking to create a secondary navigation menu above the main navigation menu, just like this website...https://www.stgeorges.edu/

What would the best way to go about achieving this?  I was going to start with a blank template, but if there is a template that offers this, I would be open to starting with that.

Thank you in advance!

I used to help a member same case, our approach is place all items to main navigation, then use CSS to break down them to 2 rows.

Of course we can change style of 2 rows differently easier with CSS code.

If you want this, just add all links to main nav then let me know which items on row 1, row 2, we can help with code easier

Thanks @tuanphan!  I have a few other features that I am trying to achieve with the 64 page website I am building (multiple email form submission, sub navigation side bar, searchable staff directory).  After many hours of research, I have found that most of the features I am looking for are available in Squarespace 7.0.  So my question for you is...do you feel 7.0 will always be accessible or do you feel it will eventually be phased out?

On 7/26/2023 at 11:07 AM, paul2009 said:

If you want the secondary navigation to "feel" secondary/separate, and if it won't need to be changed often, you can also create it by manually create a secondary nav in some HTML using code injection (with a little CSS to style it). Here's a simplified example:

Hi @paul2009 I used your code injection for the secondary navigation and it worked!  Thank you for that code.  I could use some help with styling if you can be of assistance! 

I would like the links laid out like you have them on the screenshot you sent (on one line and aligned to the right in the same font as the main navigation titles).

I would also like the background of the secondary navigation bar to be hsl(49, 89%, 36%).  

This is the modified code injection I used.

<div class="nav nav-secondary-wrapper">
  <nav aria-label="Header Secondary Nav">
    <ul class="nav-secondary">
      <li class="nav-secondary-item">
        <a href="/news">News</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/calendar">Calendar</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/support">Support</a>
      </li>
    </ul>
   </nav>
</div>

This is look at the preview site (it is still a work in progress and the home page has not been designed yet)

https://duck-gopher-pebd.squarespace.com/

password: SCCS

Thank you so much for always being so helpful!

Cheers,

Holly

15 hours ago, hollykdesign said:

I used your code injection for the secondary navigation and it worked!  Thank you for that code.  I could use some help with styling if you can be of assistance! 

Hi Holly

Try adding this Custom CSS and modify it to meet your needs. You can remove or comment out any of the lines to see how they change the style.

.nav-secondary-wrapper .nav-secondary-item a {
  color: #fff;
  font-family: "proxima-nova";
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: 600;
  font-style: normal;
  line-height: 1em;
}
  
.nav-secondary-wrapper .nav-secondary-item a:hover {
  color: #ee5353;
  }
.nav-secondary-wrapper .nav-secondary-item {  
  display: inline-block;
  padding: 17px;
  cursor: pointer;
  }
.nav-secondary-wrapper {
  text-align: right;
}

Let me know if you have any questions 🙂

2 hours ago, paul2009 said:

.nav-secondary-wrapper .nav-secondary-item {  
  display: inline-block;
  padding: 17px;
  cursor: pointer;
  }

Thanks so much @paul2009!  It aligned and looks great!  The only thing is I can't figure out how to make the bar this color #AE900A.  Is this the portion of the code that will change it?  I tried adding a line for the color, but it didn't work...I am not very understanding of coding yet.  Can you adjust the code or explain to me how I can change the bar color?  Thank you!

2 hours ago, hollykdesign said:

Thanks so much. The only thing is I can't figure out how to make the bar this color #AE900A. 

No problem.

As you want to apply this colour to the background of the entire secondary nav wrapper, you'll need to add background: #AE900A; to the .nav-secondary-wrapper section, just after it says text-align: right; so it looks something like:

.nav-secondary-wrapper {
  text-align: right;
  background: #AE900A;
}

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

@paul2009 Many thanks!!

This was so amazing! Thank you. For some reason my secondary navigation is not linking to the pages. 

I've added this code to the individual pages in the member site and have tried to link them; however, it does not appear to be working.  Is there a special url/code I'm supposed to use to link them   like /member-site/resources  or /pages/member-site/resources 

or  /xxxx/resources   because just using /resources does not work for me and the member site pages. 

Thank you so very much again for the codes thus far. it's been super helpful. 

18 hours ago, ChristinaSchlecht said:

For some reason my secondary navigation is not linking to the pages. 

I've added this code to the individual pages in the member site and have tried to link them

I recommend that you login as a member in an incognito/private window and take a look at the URL shown in the browser address bar. If you have difficulties with this, please share a member login/password with me (privately) and I'll take a look.

@paul2009 Thank you for posting this code! I'm trying to use it on a sandbox and noticed that the promotional banners cover up the secondary nav. I'm not sure how to push everything down so that it isn't covered by the promo!

5 hours ago, mmchronos said:

I'm trying to use it on a sandbox and noticed that the promotional banners cover up the secondary nav.

Are you using the same Bedford template on version 7.0? If not, the code will probably require some changes. A link to your site will help us to help you.

@paul2009 Thanks, Paul -- I'm not using that template because it doesn't seem to be available for new sites? I just went in to see if I could create a site to improve our current SS site, because our template doesn't let us do much. I didn't have an option about which version to use. Here's what I'm putting together and what i'm trying to replace: 

New: https://tambourine-cuboid-jafy.squarespace.com/ (can't figure out how to close the space between the header and the video or how to have a functioning utility nav)

Old: https://chronos.academy -- trying to add utility nav and rows with different backgrounds so that we can use them as callouts. Template isn't very flexible. 

I'm very familiar with WP so I'm tempted to scrap the whole thing and rebuild over there where there are more options and flexibility with layouts, etc. 

Hello @paul2009, thank you for the solution.

Where, in which block are you adding the html please?

Are you injecting this via javascript in the head section or?

Thanks a lot, kr Debbie / Serge

1 hour ago, SergeKrainz said:

Where, in which block are you adding the html please? Are you injecting this via javascript in the head section or?

The HTML is simply pasted into the Code Injection (Header) panel (how to find it). No need for JavaScript.

The CSS is added to the Custom CSS panel (how to find the CSS panel).

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

Good afternoon, I hope everyone is doing well.

My name is John and I am in need of some help. I really like this header A LOT. I really like the color of the dropdown (the transparency) and the way the header looks. Can someone help me with this custom code & CSS if so I might be able to apply this to our website. I was going to copy and paste but we do not need the secondary navigation.

Thank you so much. I sincerely appreciate your time and help!

Thank you again. I wish you a blessed day!

Our website - https://www.dotregistrations.org

My email is - johnwriggs36@gmail.com