Squarespace CSS: Fixed Navigation Header on Scroll (Works For Mobile & Most Templates)
Sign up for a free Squarespace trial here! #afflink
This is a simple blog post, just to address a common Squarespace-related search term.
It seems a lot of people are wanting to know how to lock their navigation header in place as a user scrolls down through the site.
Usually, with scrolling, the header disappears from view, but there is value in keeping the header visible so that visitors always have access to your navigation menu.
Locking the header in place—which is usually called fixed navigation—is a technique with the user in mind. And good design is user-friendly design!
In Squarespace version 7.1, you can fix the navigation in the Style tab without using any CSS. However, if your site uses version 7.0, you’ll need to use a bit of Custom CSS.
Fortunately, my dear colleague Elise over at Websites by Elise was willing to help us all out by writing some Custom CSS which works across devices and for most templates! So without further ado, here’s how to fix the navigation header menu in place on your Squarespace website…
Custom CSS for Fixed (Sticky) Header Navigation on Squarespace Websites:
Works For Most Templates including Brine, and works across devices!
From the backend of your Squarespace site, navigate to the Custom CSS section (Design > Custom CSS), then paste the following code:
// fixed header navigation for desktop, tablet and mobile //header, .Mobile { width: 100%; position: fixed; position: -webkit-sticky; position: sticky; top: 0; z-index: 1000;}if the background of your header navigation is transparent (rather than a solid color) OR if option #1 added too much padding to the top of your site, use the following CSS instead:
// fixed header navigation for desktop, tablet, and mobile //header, .Mobile { width: 100%; position: fixed; top: 0; z-index: 1000;}
Looking toward Port Townsend, WA from a ferry crossing the Strait of Juan de Fuca
Hopefully this worked for you. I know that personally the articles I found on this topic created a fixed navigation but it was wonky, for example: my blog posts would get stuck underneath the header. So the Custom CSS in many of those articles didn’t really work.
I’ve tried the above CSS on several websites, though, and so far it’s worked wonderfully! That’s because Elise knows what she’s doing :) Thanks Elise!!
Let us know if you have any questions or run into any difficulties! We’ll try to help out if we can!
Thanks for stopping by and I’ll talk to you again soon. Take care~
x
Tiffany
Welcome!
Hey there! I’m Tiffany ~ a Squarespace Web Designer & SEO Expert. I design beautiful & professional websites that rank well on Google, & I teach courses on becoming a Squarespace SEO Expert, Monetizing Squarespace, and Starting Your Own Squarespace Design Business!
Feel free to contact me at: tiffany@tiffany-davidson.com
Sign up for a free Squarespace trial here! #afflink
My Courses:
Learn how to get your Squarespace website (or any Squarespace website) to Google Page 1 using organic SEO techniques!
As a Squarespace Designer & SEO Expert, I know the methodology for truly getting Squarespace websites to rank on Google Page 1, and I’m going to teach it to you!
This course is a self-guided lifetime-access course, so you can go at your own preferred pace and keep it as a resource to return to time and time again.
Please note: This course was created using Squarespace version 7.0. The same principles will still apply with version 7.1, but the overall user interface will look slightly different. Due to the inherent nature of digital products, refunds are strictly prohibited once purchase has been made. Please also note the course cost is $267 in USD currency.
Can you monetize a Squarespace website? Yes, you can. And I’ll teach you how.
Did you know your Squarespace website could be making money for you, even while you sleep, work your day job, or travel?
In this course, which includes over 3 hours of video instruction, I’ll teach you how to use SEO blogging to drive traffic to your site, and then how to monetize those visits.
Please note: This course was created using Squarespace version 7.0. The same principles will still apply with version 7.1, but the overall user interface will look slightly different. Due to the inherent nature of digital products, refunds are strictly prohibited once purchase has been made. Please also note the course cost is in USD currency.
Learn how to turn your basic design knowledge into a functional and successful business!
In this course, I outline the procedures I use to run my Squarespace design business which continues to grow in revenue every single year and has given me wonderful freedom to not only work from home, but to be able to craft my own schedule. Becoming a Squarespace designer changed my life, and I think during these new times we find ourselves in, where so many businesses are having to transition to the online marketplace in order to stay afloat, becoming a self-employed web designer is a really smart move.
Please note:
This is not a design course. Rather, this course assumes you already possess at least a basic understanding of Squarespace design and need guidance on converting that knowledge into a business.
Due to the inherent nature of digital products, refunds are strictly prohibited once purchase has been made.
The course cost is in USD currency
