How to Style the Header Navigation in Squarespace 7.1

The header navigation is an important part of our website and you have a few awesome options for how to display your navigation in Squarespace 7.1. which I share below.

You can find your header settings by going into Edit mode on any page, hover over the header and click on Edit Site Header.

1. Scrolling Header

This is the basic setting, if you leave this unchecked your header navigation disappears as you scroll down the page and you have to scroll all the way back up to see it again.

2. Fixed Header - Basic

This is the option that I use on my own website. My header navigation is fixed and visible at all times.

3. Fixed Header - Scroll Back

With this option the navigation disappears as you scroll down and appears again as soon as you start scrolling back up. This is a great option for longer pages because your site visitor doesn’t have to scroll all the way to the top of page to get to the main navigation.

4. Transparent Header

Select the Colours option in the header settings and turn on the Transparent toggle. With this setting the header sits on top of the next section’s background. If you use the fixed header setting and want to change the background colour of the header you have to change the colour theme of the section below the header.

YOUR SQUARESPACE DESIGNER

Hi, I’m Danielle. I've been working with businesses to create stunning websites and marketing campaigns for over five years. I have worked with all types of clients of all sizes, from entrepreneurs to global corporations, and I combine my graphic design & branding experience with Squarespace specialism to make bespoke websites that are uniquely you.

Ready to discuss your project? Book a free 15 min consultation call!