Add a secondary navigation menu to your 7.1 Squarespace site

Easily add a secondary navigation menu or submenu to your Squarespace site and style it to stand out with a wide range of options for position and layout using SquareKicker design extension.

Is your Squarespace navigation guiding your visitors through your website with clear and engaging menus? Does your site have multiple pages or sections that you want to direct traffic to? Create a custom menu for easy navigation and draw attention to temporary, new, or overlooked content on your site. 

Add a secondary navigation bar or submenu to your Squarespace site to direct visitors to more content

Keep your primary navigation and site header clear and tasteful by moving extra links and buttons to a second menu. Your site header and primary navigation should direct visitors to a few essential pages such as your pricing page, but if you have more content you want to promote, a secondary navigation menu can help your visitors browse your site with ease.

  • Add links to your Squarespace announcement bar to create a navbar 

  • Create a sticky section menu with unlimited styling options

  • Design a floating sidebar submenu for a long section

Understanding Squarespace navigation 

The navigation bar is the first thing visitors see when they land on your Squarespace site. It informs how they navigate through key content on your site. Make this experience effortless by adding a secondary navigation menu of your choice. It’s tempting to add numerous links to the primary navigation menu but this can add clutter and confusion. Save your primary navigation bar for a few significant pages on your site and consider using a secondary navigation strategically to direct traffic. 

Squarespace 7.1 websites lack a native secondary navigation option, but there are many creative ways to design and customize a secondary navbar, submenu, or sidebar. Use SquareKicker design extension to easily create any of these options and style them to suit your brand and your navigation needs.


 

Turn your Squarespace announcement bar into a secondary navigation menu

With all of the customization possibilities in this SquareKicker tool, you can transform your announcement bar into much more than a promotional feature. If you want a secondary navigation bar that appears on most pages in your site, this is a simple option that can be styled and positioned in numerous ways. The SquareKicker announcement bar tool allows you to choose the position of your bar, so you can fix it to the bottom, left, or right of the screen, as well as the more traditional top position. Once you’ve decided on position, you can add links and customize the font, background, colors, and many other aspects of this feature. 

Adding an announcement bar in Squarespace 

  1. Open Squarespace website tools under the website tab
    or open the marketing tools under the marketing tab

  2. Enable the announcement bar 

  3. Add your links

  4. Style your text with bold, italic, and underline

  5. Open SquareKicker announcement bar tools under the site menu

  6. Under layout choose the position your announcement bar will sit on the screen and adjust the padding

  7. Use the other style settings to customize the bar.

  8. Hide Announcement Bar close icon.


Watch our full tutorial to learn all how to enable, style, and modify the announcement bar to achieve the look you want.

 
Webpage for an architecture firm in a modern blue and white style featuring a building.

Create a sticky section menu on Squarespace 

Turn a regular Squarespace section into a secondary navigation bar by making it “sticky” with the sticky section tool in SquareKicker. Your menu can stick to the top or bottom of the screen as your visitor scrolls down the page. This means that even once your visitor has scrolled away from your header and primary navigation menu, links to important pages will remain prominent. You can customize this section in a number of ways to determine how it appears on your site, making it fun and interactive while drawing the eye to your menu links.

The sticky section menu is great for adding an additional navbar to a single page. The SquareKicker Advanced sticky tool gives you the playful options of sticky top or sticky bottom, which provide two unique interactions. Experiment with each option to achieve the desired effect. A sticky section menu remains visible as you scroll down the page or through a selected number of sections. 

  1. Select the Squarespace section you want to make sticky

  2. Click the SquareKicker icon

  3. Open the Advanced tab

  4. Select the sticky section menu option

  5. Here you can set the mode to sticky top or sticky bottom

Master the sticky tool with our tutorial that explains how to use sticky to achieve a range of effects.

 
A French restaurant menu with black text and a grey background.

How to create a floating sidebar on your website

Use the dynamic sticky block tool to create a sidebar that “sticks” to the page as you scroll through content to create a floating side menu. This is a stylish option for longer sections with a lot of content, such as a restaurant menu. You can style the block and choose an appropriate size and position so it compliments your other content. 

  1. Select the Squarespace text block you want to make sticky

  2. Open SquareKicker

  3. Open the Advanced tab and select the sticky block menu option

  4. Set the mode to sticky top and adjust the offset to the desired position on the page

Previous
Previous

How to customize button styles and colors on Squarespace

Next
Next

Supercharge your Websites with SquareKicker - Hosted by Squarespace