How to Add a Secondary Navigation Bar in Squarespace

When you have a lot of pages on your website, it’s only right that you want to make sure they’re easy to find.

In this scenario, a secondary navigation bar can be a great way to improve the user experience on your Squarespace site and ensure everyone can access all your pages.

You used to be able to add a secondary navigation bar to most templates in Squarespace 7.0. However, this option disappeared in 7.1.

The good news? You can easily create a secondary navigation bar in Squarespace 7.1 with a little CSS code. Here’s how to do it in four simple steps.

Find out more about custom code in Squarespace

Step 1

This tweak works by creating an announcement bar at the top of your website and using CSS code to turn it into a secondary menu.

Start by going to the Marketing menu and selecting Announcement bar. Toggle it so it’s enabled on your site.

Step 2

Add the text that will appear in your secondary navigation bar, creating the links that will take people to the relevant sections of your website. Click Save when you’re done.

Step 3

If needed, now it is time to tweak the colors of the Squarespace secondary navigation.

Go to the Design menu and choose Colors. Then edit one of the themes, and scroll down to Announcement bar. Here you can both change the background color and font color.

Step 4

Finally, we’re going to add the code that transforms this announcement bar into your secondary navigation bar.

Go to the Website menu, then scroll down to click Website Tools, and Custom CSS. Paste the following snippet into the custom CSS box:

.sqs-announcement-bar-close {
    display: none;
}
.sqs-announcement-bar p {
    text-align: right;
    margin-right: 10px;
    padding: 5px 0;
}

You can adjust the alignment (left/right/center), margin and padding to suit your specific needs.

Click Save, and that’s all there is to it!

Styling tips: 5 ways to enhance the navigation bar

1. Animated announcement bar

Add an animated gradient to your announcement bar. Whether you keep it as an announcement bar or turn it into a secondary navigation bar, this customization will make your website stand out!

2. Floating header

Make your header float over the top of your Squarespace site, providing a cool and contemporary effect.

3. Mega menu

If you’re looking for a bit of a coding challenge, why not try building the ultimate mega menu?

4. Glassmorphism header

Love the frosted-glass effect used by Apple? This custom header style will add a modern and elegant touch to your Squarespace site.

5. Quick tweaks

Looking for additional ways to enhance your navigation bar in Squarespace? Check out 20+ quick tweaks to transform your navigation bar.