Squarespace 7.0 - How to create a fixed navbar

HTML-CSS
1

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!

2

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
3

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!

4

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