Today I will show you step by step guide on how to add Squarespace fixed header on any template. In this way, you can also add sticky navigation only or a full header. If you know how to do this then you will able to make this on your website very easily on any Squarespace template you use. You don’t need to use any Squarespace plugins because this is very simple to do.

Fixed/sticky header increase the user experience of a website and visitors can easily navigate through the header bar from any position of the webpage.  Sometimes it’s good to not use a fixed header sometimes it is very important to have it on the website. It depends on the website’s purpose and design.

If you search over the internet about how to add a fixed header on Squarespace you may find some codes to do this. But unfortunately, anyone did not show you how to do this perfectly on any Squarespace template. The code sometimes works but most of the time don’t, because the code only works on the template family the developer tried. Today I will show you how you can add a fixed header on any Squarespace website.

Fixed header on Squarespace 7.1

Squarespace 7.1 is the latest version of the Squarespace website builder and it’s easier to customize a website than before on Squarespace.

Step 1: Edit Site Header

squarespace fixed header 7.1

Go to your Squarespace website edit mode and then edit your site header.

Step 2: Select Fixed Position

From the pop-up box select the Fixed Position. You can keep the Basic style or Scroll Back from the Fixed Header Style option which you think best for your website.

Step 3: Save

When you are done with your fixed header style click DONE > Save in the upper left of your page to apply your changes.

You may also like..

 

How to add a fixed header on Squarespace 7.0

You have to follow some really simple steps to add a sticky header on your Squarespace website. Here is the shortlist. I will describe every step blew.

  1. Find the header CSS class/ID of Squarespace template by inspect element.
  2. Find the body CSS/ID class of the template
  3. Copy my provided code
  4. Replace header CSS class/ID according to your template header CSS class/ID
  5. Open your website custom CSS option and paste the code

 

Now let me show you step by step guide with images. I am using google chrome browser and Squarespace Basil template from Barine template family. You can use this exact code on any Brine family Squarespace template.

Find the header CSS class/ID

Right-click on your Squarespace website header and inspect.

Then find where the header tag starts from the code, then you will get the header class or ID. Remember, the word before space it the desired class or ID we will use. If you see the screenshot blew you will understand.

Copy the class and paste it into the Custom CSS of your Squarespace website. You can adjust the padding-top according to your header height.

.Header {
position: fixed;
z-index: 10000;
width: 100%
}
.Site-inner { padding-top: 100px; }

 

Now save this code. Your Squarespace header is now fixed and it will be sticky if you scroll down the page.

Now try with a different Squarespace template. Now I am trying to do this on Five templates. You can follow the same method for any Squarespace template. You can muse hover on the code tag to see exactly where your header class is.

As you see the header is not defined with class this header defined with ID and the ID parameter is different than the Basil template (Brine template family) So your code will be for five template..

#navigation-top {
position: fixed;
z-index: 10000;
width: 100%
}
.Site-inner { padding-top: 100px; }

 

So you have to carefully find the header ID or class of any Squarespace template and you can use the same code by just replacing your template header ID or class. This coding method will perfectly work on any Squarespace template if you follow this method and do it correctly.

 

I hope this article helped you to have fixed navigation on your Squarespace website. If you face any problem to do this. Comment here, I will try to help you. If you can do it successfully then let me know. Share this article if you think it’s really helpful. If you need a professional Squarespace website designer you can contact me. My team provides professional web design services.

Adol

I am Adol, a web developer, and blogger from Bangladesh. Designing is my passion. I love to share my knowledge and useful information through my posts. Ask me anything I know the answer because I have google :)