A Guide to Creating a Squarespace Secondary Navigation Bar

Has your website been feeling a bit cramped lately?

Do you have a lot of pages you’d like to showcase with ease?

Or maybe you just want to offer visitors an easier way to navigate your website. If you answered “yes” to any of these questions, then chances are that your site needs a Squarespace secondary navigation bar.

Secondary navigation bars are handy if your website content is too comprehensive to fit into the primary menu or if you want to break down topics into logical chunks. In this tutorial, I’ll show you how to add one in just a few simple steps. So grab your mouse, and let’s get going.

You can also book a call with me if you have any specific design issue you find confusing on your Squarespace website.

What Is a Secondary Navigation Bar? (Does Your Squarespace Website Need One?)

Secondary navigation bars are basically links to site content that aren’t as relevant as primary web pages but still deserving of easy access from any site location.

The above is my primary navigation, continuing reading to see a secondary navigation and how to add them

In general, adding a secondary Squarespace navigation bar to your website makes it easier for visitors to navigate it and obtain the information they want quickly.

Let’s expound more on its key benefits below.

1. Easily link to multiple pages.

To start, a secondary navigation menu allows you to link to several pages for different types of content. For example, you could link to a page dedicated to products, another page to blog posts, and a third page to customer testimonials. This makes it much easier for visitors to find what they want without scrolling through endless content pages, boosting their user experience.

2. Easily organise your content.

Secondary navigation menus are also great for categorising and grouping content on your site. Instead of having all your information on one page, you can break it up into sections, allowing visitors to quickly jump between topics and find what they need without searching through long lists of content. This can help improve the overall usability of your site and make it more user-friendly.

3. Promote critical website pages.

Finally, adding a secondary navigation menu can help promote other areas of your site that may be overlooked, such as contact information or customer service support resources.

For context, I ensure these crucial components are easily accessible when designing websites for my clients at byCrawford. I really can’t overemphasise the need to create compelling websites that provide visitors with an enjoyable experience from start to finish. You can check out my Squarespace website design portfolio for inspiration/ideas.

How to Add a Secondary Navigation in Squarespace

Squarespace 7.1 doesn’t have a default option to add a secondary navigation bar, but it’s still possible to add one to your site using the Site Nav Replacer plugin from Will Myers. Alternatively, you may use text links.

The following steps outline how to set up the free version of the plugin:

1. Add your primary code.

2. Add your links.

3. Style your Squarespace navigation bar.

Step #1: Add your secondary nav bar code.

The first step is to add the main code for the secondary navigation bar.

To do this, navigate to “Settings” >>> “Advanced” >>> “Code Injection.”

Copy the following code, paste it into the “FOOTER” area and save:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="https://assets.codepen.io/3198845/WMSecondNavFREEv1-4.js"></script>

<div data-wm-plugin="subnav"

     data-position="top-center">

</div>

This code will take effect on all your website pages; however, it won’t be functional until you add your links.

Step #2: Add your links.

The next step is to introduce the links you want to appear in your secondary navigation bar.

To do this, create a new folder and add it to your main navigation area.

You should ensure that the folder URL is set to /secondary-nav.

To create a folder, navigate to “Pages” >>> “Main Navigation.”

Click the “+” icon and select “Folder.”

Once you’ve created the folder, you can add the links that you want to appear in your secondary navigation bar.

Click on “+ ADD PAGE” under the folder, and select “Link” from the options.

Note that your secondary navigation bar can’t feature dropdown folders, so you’ll need to keep it simple.

Anything you place in the /secondary-nav folder will be automatically rearranged into your secondary navigation bar.

Step #3: Style your Squarespace secondary navigation bar.

The final step is to make some style customisations to your secondary navigation bar.

To do this, you can add custom CSS from “Design >>> “Custom CSS.”

Tip: This post shows you how to navigate to “Custom CSS” on Squarespace.

If you want to change the background colour of your secondary navigation bar, you can add the following code:

#wm-subnav{

background:red;

}

You may also use the below code to change the link colour:

#wm-subnav a.wm-subnav-item{

  color:white;

}

#wm-subnav .secondary-nav-dropdown-icon path{

  stroke: white;

}

Tip: Adding a minimal search bar to your menu layout can further boost user experience while giving your website an exquisite look.

Frequently Asked Questions on Squarespace Secondary Navigation

What is Squarespace secondary navigation?

Squarespace secondary navigation is an additional set of menu links that can be added to your website in addition to the primary navigation.

Can you add secondary navigation on Squarespace?

Yes, Squarespace 7.0 allows you to add secondary navigation to your website. However, you’ll need a plugin or custom codes to achieve the same on version 7.1. Alternatively, you can use text links to manually set up extra navigation menus.

Wrapping It Up

A Squarespace secondary navigation menu helps boost your website’s user experience in several ways, and you should consider setting up one on your website. With just a few simple steps, you can add an extra layer of oceanic depth to your website, making it easier for visitors to find what they want.

My name is Sam, and I’m an expert Squarespace website designer, so you can always contact me if you need help with your site’s user interface.

---

📩 Join the inner circle to get exclusive code updates

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?