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?

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:

<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="/give">Give</a>
      </li>
      <li class="nav-secondary-item">
        <a href="/campus-plan">Campus Plan</a>
      </li>
    </ul>
   </nav>
</div>

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!

@paul2009 Many thanks!!