How Do You Make Sticky Navigation Of Impact Squarespace Template

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

The header of your website is often one of the first things a company sees when they come to your website and it'south besides something they often come back to in order to easily navigate effectually the site.

One way y'all can create an interesting outcome and ensure your logo and navigation are ever visible is by adding a sticky or fixed header navigation. This will allow your header to stay fixed in identify at the superlative of the screen as your visitors scroll.

Hither's how to reach this wait in both Squarespace seven.0 and 7.1!

How to add together a Sticky Header Nav in Squarespace 7.i:

Squarespace 7.1 has fabricated implementing a stock-still header much easier. The feature is now built-in then 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-mitt corner.
Hover over the header and click Edit Site Header.
In the popular-upwards window, plough on Stock-still Position using the toggle button.
Ensure Stock-still Header Style is set up to Basic. If you cull Scroll Dorsum, the header will only remain stock-still as a user is scrolling back upwards from the lesser.
When you've finished setting the header style, make sure to click Done > Salvage in the upper left corner of your page to use these changes.

How to add a Sticky Header Nav in Squarespace 7.0:

A scattering of 7.0 templates support stock-still headers with their built-in features, and for the rest we'll accept to rely on custom CSS.

First things beginning, let'due south determine if the template you're using has the fixed header selection and how to activate this feature.

Adirondack

Go to Blueprint > Site Styles and underneath Navigation, check Always Evidence Nav
When yous roll downwards the site, the header volition collapse and the logo volition be replaced with the site title.

Flatiron

Become to Blueprint > Site Styles and underneath Site Header, select Header position: Stock-still

Momentum & Skye

The header is ever stock-still in these templates

Supply & Wells

The sidebar navigation is always fixed on these templates

If you lot'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 caput over to Design > Custom CSS and paste information technology in.

Brine

.Header {    position: stock-still !important;     z-alphabetize: yard;     width: 100%; }

Bedford

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

York

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

Pacific

.header-inner {    position: fixed !of import;     z-index: m;     width: 100%; }

Now that y'all have a fixed navigation, let's deep swoop into the code to learn how information technology'due south working and how y'all can customize information technology.

Offset, you lot'll notice that the first line of code is different for each template. This is because each seven.0 template family is unique so we'll need to target the class your header is contained in.

For example, a Brine family unit 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 !of import;
z-alphabetize: 1000;
width: 100%;
}

Adjacent, we have the lawmaking that is forcing the header to stay at the summit of the page making it "gluey" or stock-still. The "!important" flags information technology as important to override any other instructions within the lawmaking.

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

The z-index aspect ensures that the header is on top of all the other page elements and so information technology's always visible every bit 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 total width of the screen. If you would like to set your header to a dissimilar width, you can change that percentage here.

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

Once you accept 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 absurd, as well. 🙂

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