Creating a Navigation Bar for a Specific Page Only in Squarespace 7.1

This post teaches you how to created a special navigation bar for one page only, fixed at the top of the page on scroll. This is a solution for Squarespace 7.1. If you’re using a 7.0 Brine Template, see this post instead.

Step 1: Create a new section at the top of the page

On the page where you want to add the custom navigation bar, add a new section as the second section of the page and style it to look like a navigation bar. This section must be the second section of your page. (If you make it the first section, you can run into sizing issues because of your header.) To make the bar nice and narrow, you should toggle off the “Fill Screen” setting and set your text and any images to vertically align to the center of their containers.

Be sure to style your bar on both desktop and mobile. How you style it now is exactly how it will look as a navigation bar. It’s just a normal (very narrow!) page section.

Save your changes and exit the page editor.

Step 2: Turn it into a navigation bar using Advanced Page Settings

In the Website/Pages panel, click the Settings wheel/cog to access the Page Settings for this specific page. Click the “Advanced” tab. (Note: If you add this to your sitewide Custom CSS or your sitewide Code Injection instead, you’ll turn the second section of EVERY page into a fixed nav bar at the top! Don’t do that!)

Where it says “Page Header Code Injection”, paste the following:

<style>
.page-section:nth-child(2)
{position:fixed !important; top:0px !important; left:0; width:100% !important; z-index:9999 !important;}
  & a {text-decoration:none !important;}
  & a:hover {opacity:0.8 !important;}
</style>

Save your changes. When you refresh your page, the new section you’ve created should now be fixed at the top of the page.

Style Tweaks Based on your Header Type

• If you don’t have a fixed header and you want the special nav bar to appear once you scroll past the header, make it slightly smaller than your header. It will be there the whole time, but hidden behind the header until you scroll past it.

• If you have a fixed header and you want the special nav bar always visible beneath it, change “top:0px” in the code above to the height of your header.

• If you have a fixed header with the “scroll back” style, you’ll want to keep the special nav fixed at “top:0px” and make sure it’s slightly smaller than the main header. It will be hidden whenever your main header is visible, but appear on scroll.