How to add a second navigation menu to your Squarespace site

Your site is pretty big in terms of a number of pages.

Most of those pages are pretty important to your business strategy so you don't want to leave any out of your main menu.

The problem is, all of those links simply don't fit.

Now, the Brine family templates give you the possibility of having a primary and secondary menu that you can stack on top of the other, which is a fantastic solution if you use one of those templates but... what if you don't?

You code it in.

In this post, you'll learn how to create a secondary navigation – out of thin air – on top of your Squarespace site header to solve your excessive link problem on any template.

Before we begin, keep in mind that this is going to be a simple navigation.

You can make it as complex as you like if you know how but, for this tutorial, we'll keep it simple and create a second menu in Squarespace with just a few direct links.

 

Shall we?

 

Here's the FULL CODE

HTML

<div id="secondary-menu">
  <ul>
    <a href="/origami"><li>Origami Paper</li></a>
    <a href="/wrapping"><li>Wrapping Paper</li></a>
    <a href="/party"><li>Party Decorations</li></a>
    <a href="/holiday"><li>Holiday Motifs</li></a>
    <a href="/handmade><li>Handmade Paper</li></a>
  </ul>
</div>

 

CSS

#secondary-menu ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  text-align: center;
}
#secondary-menu li {
  display: inline-block;
  padding: 30px;
  text-transform: uppercase;
  font-size: 13px;
  transition: background 1s, color 1s;
}
#secondary-menu li:hover {
  background: #44deaa;
  color: #159064;
}
@media screen and (max-width: 930px) {
  #secondary-menu li {
    padding: 15px;
  }
}

/*OPTIONAL CODE TO SET THE NAV BELOW THE HEADER*/
@media screen and (min-width: 930px) {
  #secondary-menu {
    position: absolute;
    width: 100%;
    z-index: 999;
    top: 100px;
  }
}

 

Tutorial

(Not enough time to read? It's ok! Just skip ahead to the important notes)
 

Creating a new navigation menu

Since we want our new navigation menu to appear on each of our site's pages, we're going to be adding the HTML portion under Settings > Advanced > Code Injection.

Now, we'll be creating a bullet point list but without the bullets, and we'll set it horizontally.

The HTML list structure we need is the following:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Where ul is the HTML tag for unordered list, aka bullet point list, and li is the HTML tag for list item, which will be each of the menu items we're creating.

Now, since our menu items will be links, we need to add the link tags to our list structure. We can do it two ways: set the link inside the <li> tags or wrapping the <li> tags.

The difference?

By setting our <a> element inside our list item like so:

<li><a>Link</a></li>

The word Link will be clickable, but not the container we'll be creating around it when we style the li elements.

By wrapping the entire <li> element like this:

<a><li>Link</li></a>

The entire li element will be clickable so it will be easier to use.

Thus, we're taking the second route:

<ul>
  <a><li></li></a>
  <a><li></li></a>
  <a><li></li></a>
</ul>

So, let's assume we have a decorative paper business and we want to display in our new menu 5 links that lead to specific categories of paper: Origami Paper, Holiday Motifs, Wrapping Paper, Party Decorations and Handmade Paper.

By adding the corresponding menu items and links, we get this: 

<ul>
  <a href="/origami"><li>Origami Paper</li></a>
  <a href="/wrapping"><li>Wrapping Paper</li></a>
  <a href="/party"><li>Party Decorations</li></a>
  <a href="/holiday"><li>Holiday Motifs</li></a>
  <a href="/handmade><li>Handmade Paper</li></a>
</ul>

On each of our menu items we now added the href attribute to the opening <a> tag, to indicate where that link is going to go. We also added the name that's going to appear in our menu in between <li> tags.

In this case, since our links are a page in the same site, we only need to add the URL slug of that page. But keep in mind if you're directing to an external page, you'll need to add the full url inside the quotes, like so: href="http://www.google.com".

 

One last thing to do here is to wrap the entire menu inside a div and give it a name, how about secondary-menu?

This is going to allow us to easily center the unordered list without messing up the spacing between menu items.

<div id="secondary-menu">
  <ul>
    <a href="/origami"><li>Origami Paper</li></a>
    <a href="/wrapping"><li>Wrapping Paper</li></a>
    <a href="/party"><li>Party Decorations</li></a>
    <a href="/holiday"><li>Holiday Motifs</li></a>
    <a href="/handmade><li>Handmade Paper</li></a>
  </ul>
</div>
 Adding a secondary navigation to Squarespace with HTML

 

It's time to see what that looks like when saving and loading the page.

 Previewing the new secondary menu in Squaresapce

 

Alright! As you can see we now have a bullet point list at the top of the page with our new menu items, so we need to go and style it with CSS.

 

Styling the new navigation menu

By going into Design > Custom CSS we can now target our new menu.

Since we know it has an id of "secondary-menu" we can use the id selector:

#secondary-menu {

}

To remove those bullet points, we need to target the ul element inside our menu, so we need to use the ul selector as well and then set the first declaration for the "list-style-type" property:

#secondary-menu ul {
  list-style-type: none; 
}
 Removing bullet points from an HTML unordered list

 

Perfect.

Let's also get rid of the extra space that was between the bullet point and the text

#secondary-menu ul {
  list-style-type: none;
  padding-left: 0;
}
 Removing the bullet point padding in the unordered list

 

There seems to be some spacing on top and below our menu, so let's take a look with Inspect Element and see what it is to remove it, this way we'll avoid having any white space there when we add the hover mode for our li elements.

 Using inspect element in Squarespace to check for margin

 

See those orange lines at the top and bottom of our menu? That's margin so it has to go.

#secondary-menu ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
 Removing the margin of the secondary menu

 

Perfect! Now let's make our menu horizontal by setting the display property of each of our li elements as inline-block.

#secondary-menu li {
  display: inline-block;
}
 Making an unordered list horizontal

 

Alright!

We can add some nice spacing now to separate each of our menu items on all sides. Let's use some padding to do that.

#secondary-menu li {
  display: inline-block;
  padding: 30px;
}
 Adding padding to menu items

 

Ok this is looking really good! Time to align it to the center.

We'll be moving the ul element to the center of its wrapping div with text-align, like so:

#secondary-menu ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  text-align: center;
}
 Aligning the navigation menu to the center

 

Now that looks like a menu!

Only a few more details and we'll be set. Let's style the font a little bit, I'll set it to uppercase and reduce the size to 13px.

We can do that under the li selector:

#secondary-menu li {
  display: inline-block;
  padding: 30px;
  text-transform: uppercase;
  font-size: 13px;
}
 Styling the font of the secondary menu

 

Now, I'm going to keep the background of the menu white but you can choose to add a color to it by targeting the entire menu selector:

#secondary-menu {
  background: #44deaa;
}
 Adding an optional background color to the second menu bar

 

What I'll be doing instead is using that same color as the background color on hover of each of the menu items.

To target them, we'll need to add the pseudo-class :hover to the end of our li selector:

#secondary-menu li:hover {
  background: #44deaa;
}
 Adding a background color on hover to menu items

 

And how about we also change the font color on hover to a dark green instead of black?

#secondary-menu li:hover {
  background: #44deaa;
  color: #159064;
}
 Changing the font color of menu items on hover in Squarespace

 

Ok, and one laaast thing, let's make the transition from normal mode to hover a lot smoother.

We'll be doing that by using the transition property and setting it under the normal mode selector for our li elements. Both background color and font color change will take 1s to happen:

#secondary-menu li {
  display: inline-block;
  padding: 30px;
  text-transform: uppercase;
  font-size: 13px;
  transition: background 1s, color 1s;
}
 Preview of hover mode in new menu

 

Awesome!!

You now know how to add a brand new secondary menu to your Squarespace site by using a bit of HTML and CSS!

 

Improving the look of the new menu in mobile

So far, our menu is looking great, however... when looking at it in a smaller screen, it's not that pretty anymore. The menu items do find their way around the tighter space, but we can certainly make them look a bit better than this:

 New menu bar in smalles screens

 

What we need to do here is set a media query in our Custom CSS window so we can change a few things about the style of the menu items, without affecting the desktop view.

To pin point the moment when we should start making the changes, we have to look at when they start going into a second line. Now, to know the exact width in that moment, I'm going to leave my Chrome Inspect Element window open in the background and start shrinking down my browser window.

This will make a number pop up on the right corner, telling me the width of the viewport in pixels by the height of the viewport.

Once I see the menu starts creating a second line, I'll know at what width it started to happen.

 Finding out when a media query breakpoint should be added to the new menu

So it seems like the second line appears around 922px, let's round that up to 930px.

Now, at this point we could simply stack the menu items one on top of the other but I think they're going to look odd being so long. 

What we're going to try instead is simply modifying that 30px padding we gave them and make it smaller.

Let's see how that goes.

 

We need to set up our media rule to let the browser know that when a certain condition is met (in this case, the browser screen has a maximum width of 930px, a few things need to change.

@media screen and (max-width: 930px) {

}

Now, we'll be targeting our menu li elements so we need to add that inside our rule to indicate who is getting affected while that width condition is met.

@media screen and (max-width: 930px) {
  #secondary-menu li {

  }
}

Lastly, we need to add the changes that are going to happen. In this case, we'll be reducing our padding to let's say 15px.

@media screen and (max-width: 930px) {
  #secondary-menu li {
    padding: 15px;
  }
}
 Adding media queries to the new menu bar

Alright so now it will fit in a single line a little longer, while having a reduced space, and then in mobile phones, the spacing is going to look much better!

 Responsive secondary menu

 

(Optional)Setting the navigation below your header

I got a question from a lovely reader asking me if there was a way to have this new navigation below the header/logo instead of on top of it.

And the short answer is yes.

However, to keep this as simple as possible, I'm showing you how to do it when:

  1. Your current header is set as relative. Meaning it's NOT fixed to the top of your page and it moves with the content; it's not always visible when you scroll.
  2. You don't mind the menu going back to the top of the header once it reaches a certain screen size in mobile, since this way you can make sure your page content won't get covered (without any extra coding).

 

So, with that out of the way, let's do this.

First, you need to complete the rest of the tutorial to build your navigation. I would recommend you add a background color to your menu (like shown above when it turns green) if it's going to go over a background image. Also, it will be easier to see what you're doing!

With the menu all set, what we need to do is set a condition that will tell our browser "hey, ONLY from this point and above, make the menu sit below the header" so that it automatically goes back to the top in any other instance.

 

So, let's write in our Custom CSS window our media query for that:

@media screen and (min-width: 930px) {
}

The pixel size can be whichever you prefer, I just used the same one from before since I already now the menu turns into two lines around that size.

If we were to leave it below the header at that point, then the second line of the menu would start covering the content of the page.

Why? Because of the absolute position we'll be giving it.

@media screen and (min-width: 930px) {
  #secondary-menu {
    position: absolute;
  }
}
 Adding a secondary nav bar in Squarespace below the header

 

Now, to make it span the entire width of the screen (and actually see it), let's give it a width of 100% and a really large z-index value to make sure it shows up on top of anything else:

@media screen and (min-width: 930px) {
  #secondary-menu {
    position: absolute;
    width: 100%;
    z-index: 999;
  }
}
 Making the secondary navigation visible with z index

 

Lastly, it's time to move it!

I'll be giving it a top offset of 100px to start, and then you can adjust it as necessary.

@media screen and (min-width: 930px) {
  #secondary-menu {
    position: absolute;
    width: 100%;
    z-index: 999;
    top: 100px;
  }
}
 Creating a secondary navigation below a Squarespace header or logo

There you go!

Now you have a secondary menu under your Squarespace header.


To keep in mind

  • If you want to take it a step further and stack your menu items in mobile, in the media query we just created, simply add display: block like so:
    @media screen and (max-width: 922px) {
      #secondary-menu li {
        padding: 15px;
        display: block;
      }
    }
    

 

  • You can change up the max-width condition value as well or create a second one if you prefer, for smaller screens.
     
  • To set the nav below a fixed header, you'll have to give the secondary menu a position of fixed as well.
     
  • If you want to keep your menu below the header at all times, you'll need to add additional top padding or margin to your content container, otherwise if the menu becomes more than one line it will start covering part of your page content.

 

Until next time,
B.

 

LIKED THIS POST?

I'd love it if you shared!


More Squarespace tips & tricks this way