How to Create a Sticky Header on Your Squarespace Website
Ever feel frustrated scrolling up and down on a long page just to get back to your navigation links? Adding a sticky or fixed header to your site can solve this issue, keeping your navigation menu visible as you scroll down. This is especially helpful for longer pages, as it lets visitors access your menu without scrolling all the way back to the top. In this guide, I’ll show you how to easily set up a sticky header on your Squarespace website.
Watch the video
Check out the YouTube video below. 👇🏼
Why Use a Sticky Header?
A sticky header keeps your navigation menu accessible, allowing visitors to move easily between sections of your site. This is particularly helpful for:
Long pages: Save visitors from the hassle of scrolling back up just to access the navigation menu.
Improved user experience: A sticky header keeps everything within easy reach, encouraging visitors to explore your site further.
Step-by-Step Guide to Adding a Sticky Header
Step 1: Open Full-Screen Preview
Before we dive into the settings, let’s preview your page in full screen to get a sense of how your current header behaves. Go to your Squarespace page and open the full-screen preview. As you scroll, you’ll notice the header moves up and out of view. This is where the sticky header will make a difference by keeping the header visible at the top of the page.
Step 2: Access the Site Header Settings
Now, let’s make that header sticky!
Click on Edit at the top of your page.
Select Edit Site Header and then click Edit Design to access the design options for your header.
Step 3: Choose a Fixed Header Style
Scroll down in the design options until you find the setting labeled Fixed Position. This is where you can choose between two styles: Basic and Scroll Back.
Basic Style: Selecting “Basic” keeps your header fixed at the top of the page, visible the entire time as you scroll. This is ideal if you want your navigation links accessible at all times.
To select this option, simply click Basic under Fixed Header Style, save your changes, and exit the settings.
Step 4: Preview the Sticky Header
To see how it looks, go back to Full-Screen Preview. As you scroll down the page, you’ll notice the header remains in place at the top of your screen. Visitors will always have access to the navigation menu, even when they’re at the bottom of a long page. This makes it easy to jump between sections without unnecessary scrolling.
Optional: Scroll Back Style
If you prefer a subtler effect, try the Scroll Back style:
Go back to Edit Site Header and Edit Design.
Select Scroll Back under Fixed Header Style and save your changes.
With Scroll Back, the header will disappear as you scroll down but reappear when you start scrolling back up. It’s a nice option if you want to keep the page feeling more open while still providing easy access to the navigation when visitors need it.
Which Style Should You Choose?
Basic Style: Use this option if you want your header always visible. It’s straightforward and makes navigation quick and accessible for all visitors.
Scroll Back Style: This option provides a more minimal look by hiding the header when scrolling down. It’s ideal if you want the content to be the primary focus, but still want navigation accessible when scrolling back up.
Wrapping Up
Adding a sticky header to your Squarespace site is a simple way to improve usability and enhance the visitor experience, especially on longer pages. Whether you choose the Basic or Scroll Back style, your visitors will appreciate the easy navigation access!
📨 Join my mailing list to get Squarespace tips & tricks right in your inbox
Your Designer
I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.
