How to fix “jump” on sticky/fixed header in Squarespace

A fixed header is essentially a header is attached to the top of the screen and is visible always while user is scrolling .

Making the header fixed

First of all, let’s see how we can “fix” the header via Squarespace options.

In edit mode, click Edit site header → Edit design

Then scroll to Fixed position and enable it.

Fixed header options

Basic will always keep the header fixed on top, while Scroll back will hide the header when user scrolls down and show the header when user scrolls up.

Styling fixed header with CSS

From there you can style header in fixed style by using the following selector in CSS:

#header.shrink