How to create a fixed header on Squarespace
Fixed headers on Squarespace are marmite. You either love them or you hate them.
For me, I love them. In fact, I think all Squarespace websites should feature a fixed header. They give users the chance to see all the navigation options, no matter where they are on the page, and visually I think they look great.
Fixed headers are exactly what they sound like. A header that stays fixed to the top of the web page as a user scrolls down and navigates through the page.
Fixing a header to a web page is a super simple task on Squarespace, in fact it only takes a few clicks of a button. Let’s take a look at how to create a fixed header on Squarespace.
Watch the video
Check out the YouTube video below 👇
Firstly you want to navigate to your edit dashboard and select edit site header.
Within the dashboard that appears you’ll have an option for fixed position. By toggling this on, you’ll be given two choices for your fixed header.
The basic fixed header will keep the header fixed at all times, whether a user is scrolling up or down on the page.
The scroll back option however fixes the header only when a user begins scrolling back up a webpage, likely because Squarespace presumes that if a user is scrolling back to the top of the page, they’re probably looking for the navigation header.
If you want to take your fixed header on Squarespace a step further, there are a few nifty customisations that you can include.
đź“© Join the inner circle to get exclusive code updates
Back in the edit site header dashboard you can select style and customise the style of your header with various options.
Dynamic gives you the chance to add a full bleed image, video or art background to your fixed header whilst Theme allows you to select a colour from your existing colour palette and add this straight to your fixed header.
Gradient adds two different colours to your header that bleed into each other and if you’re looking for a standard, solid header you want to choose Solid which gives you this effect.
Drop shadows, background blurs and borders can also all be added here to further customise your fixed header.
And that’s it. See, I told you it was simple. With just a few clicks you’ll be able to create and customise a fixed header.
If you found this article useful be sure to check out more of my Squaresapce expert guides here.
Your designer
I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.