How to create a sticky header navigation in Squarespace

This post may contain affiliate links. We may receive a commission for purchases made through these links (at no cost to you, of course! 🙂)

The header of your website is often one of the first things a visitor sees when they come to your website and it’s also something they often come back to in order to easily navigate around the site.

One way you can create an interesting effect and ensure your logo and navigation are always visible is by adding a sticky or fixed header navigation. This will allow your header to stay fixed in place at the top of the screen as your visitors scroll.

Here’s how to achieve this look in both Squarespace 7.0 and 7.1!

How to add a Sticky Header Nav in Squarespace 7.1

Squarespace 7.1 has made implementing a fixed header much easier. The feature is now built-in so there is no custom CSS needed. Follow these steps to activate a fixed or “sticky” navigation on your site.

• Log into your Squarespace website and click Edit in the upper left-hand corner.

• Hover over the header and click Edit Site Header.

• In the pop-up window, turn on Fixed Position using the toggle button.

• Ensure Fixed Header Style is set to Basic. If you choose Scroll Back, the header will only remain fixed as a user is scrolling back up from the bottom.

• When you’ve finished setting the header style, make sure to click Done > Save in the upper left corner of your page to apply these changes.

How to add a Sticky Header Nav in Squarespace 7.0

A handful of 7.0 templates support fixed headers with their built-in features, and for the rest we’ll have to rely on custom CSS.

First things first, let’s determine if the template you’re using has the fixed header option and how to activate this feature.

Adirondack

• Go to Design > Site Styles and underneath Navigation, check Always Show Nav

• When you scroll down the site, the header will collapse and the logo will be replaced with the site title.

Flatiron

• Go to Design > Site Styles and underneath Site Header, select Header position: Fixed

Momentum & Skye

• The header is always fixed in these templates

Supply & Wells

• The sidebar navigation is always fixed on these templates
  

If you’re using a template other than the ones above, we’ve put together some custom code for some of the most popular 7.0 template families. Find your template family below, copy the custom CSS and head over to Design > Custom CSS and paste it in.

Brine

.Header { 
  position: fixed !important;  
  z-index: 1000;  
  width: 100%;
}

Bedford

.header-inner { 
  position: fixed !important;  
  z-index: 1000;  
  width: 100%;
}

York

.site-header { 
  position: fixed !important;  
  z-index: 1000;  
  width: 100%;
}

Pacific

.header-inner { 
  position: fixed !important;  
  z-index: 1000;  
  width: 100%;
}

---

Now that you have a fixed navigation, let’s deep dive into the code to learn how it’s working and how you can customize it.

First, you’ll notice that the first line of code is different for each template. This is because each 7.0 template family is unique so we’ll need to target the class your header is contained in.

For example, a Brine family template’s header lives within the “Header” class and a template under the York family has its header within the “site-header” class.

.Header {
position: fixed !important;
z-index: 1000;
width: 100%;
}

Next, we have the code that is forcing the header to stay at the top of the page making it “sticky” or fixed. The “!important” flags it as important to override any other instructions within the code.

.Header {
position: fixed !important;
z-index: 1000;
width: 100%;
}

The z-index attribute ensures that the header is on top of all the other page elements so it’s always visible as the user scrolls.

.Header {
position: fixed !important;
z-index: 1000;
width: 100%;
}

Last but not least, the width function makes sure the header navigation takes up the full width of the screen. If you would like to set your header to a different width, you can change that percentage here.

.Header {
position: fixed !important;
z-index: 1000;
width: 100%;
}

Once you have that applied to your site, you’re all done!

Adding a fixed header to your site is a great navigation tool for your users and looks pretty cool, too. 🙂

Loved that post? Check out some more design tips below!

How to create a vertical line in Squarespace (7.0 & 7.1)
How to animate your links on hover in Squarespace 7.0 & 7.1
How to create a full width Instagram feed in Squarespace 7.1
Creating an “as featured in” logo bar on Squarespace
How to add a button to your header navigation in Squarespace

If you liked this post, Pin it to Pinterest! 👇🏻