Fixed Header | Squarespace 7.0

What does this code do?

This code snippet will allow you to fix your header at the top of the screen when scrolling in Squarespace 7.0.

Note: You can create a fixed header in Squarespace 7.1 in the Squarespace Header Settings. No code is required.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Fixed Header */
.Header {
  position: fixed;
  z-index: 9999;
  width: 100%;
  top: 0px;
}

.Content-outer {
  margin-top: 50px;
  /*Moves the Top of the Page Down to Create Space for the Header */
}

Not working?

If the above code doesn’t work, it could be because your template uses a different class for the header. You can find this class the same way we find a block id. Right click and select inspect. You want to find the last line down the code where the whole navigation still gets highlighted.

For example, in the Five Template the header uses the class horizontal-navigation-bar. In order to get the position: fixed; to stick I had to use !important. I also found that instead of moving the top of the page down like in the above code, I just gave it a background colour of white.

/* Fixed Header */
.horizontal-navigation-bar {
  position: fixed !important;
  z-index: 9999;
  width: 100%;
  top: 0px;
  background: white;
}

How To Use It

1. Copy and paste the code as indicated above.

2. Edit the " 50px” to match the space you need at the top of your pages.