Squarespace 7.0 - How to create a fixed navbar

Got my first web design client! Yay!

Background: Their existing site is on Squarespace (version 7.0) which they want to keep. The current template is Project Sprout.

Problem: I want to adjust the header so that the navbar is fixed to the top of the viewport, but that’s not a default option in this template. I’ve tried three different suggested pieces of code to no avail.

Does anyone have experience with this particular template and knows the specific code I need to enter in the Custom CSS field to get that navbar to stay put?

Thank you! Any help would be appreciated!

This template?

https://kent-demo.squarespace.com/

It might help if we knew what you have tried and what didn’t work.

#header {
  position: sticky;
  top: 5%;
  width: 100%;
  max-width: 1000px;
  z-index: 10;
}

That is just for the desktop, if you want the mobile nav as well you have to target #mobileNav and give it some styles that work for it as well.


There is also a Developer Platform available for some plans (premium). I don’t know what it is or what it gives you access to.

1 Like

This worked!! Thank you so much. Now I just need to adjust the background color of the nav bar itself, which should be easy. Appreciate your help!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.