Jump to content

Creating a secondary navigation menu above the main navigation menu

Go to solution Solved by paul2009,

Recommended Posts

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?

Link to comment
  • Solution

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 of what to add to the Code Injection panel:

image.thumb.png.9ca30baddd6dcbcde87aedaa10d188d5.png

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

Here's an example of what to add to Custom CSS:

.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;
}

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

Edited by paul2009
Copied CSS from later posts

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 2 weeks later...
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

Link to comment
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 🙂

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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!

Link to comment
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  ⬇️

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 6 months later...

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. 

 

Edited by ChristinaSchlecht
want to follow topic.
Link to comment
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.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 4 weeks later...
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.

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

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

Link to comment
  • 1 month later...
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  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.