Enable Scrolling Navigation Links with Fixed Header

I am using the Yosemite template and have a single-page website (using an Index). I am trying to implement custom css that enables the navigation links to correctly highlight when scrolling on the respective page. Right now, it's just frozen on highlighting the first page of my Index, since I implemented the following code to to achieve a fixed/sticky header:

#header { 
position: fixed !important; 
width: 100%; 
z-index: 10000;  
}

Is there something else I can insert here that will allow the navigation links to highlight correctly?

Thanks!

Hi @lauraworcester

Please post a link to the site so that we can see the issue. A trial site address of something.squarespace.com is fine.

Here is a link to the site:

https://stephanie-amateis-ynst.squarespace.com

Hi @lauraworcester

To avoid confusion (for anyone reading this), there isn't a Yosemite template. It's called Bryler and it's a version of the Pacific template.

To fix the navigation on the home page you don't need CSS. When your index page is set as the homepage, the Main Navigation can be locked to appear at the top of the browser window using Style Editor. It's thinner and won't feature the site title but it will follow the sections of the index as you scroll.

Remove the CSS and then in the Style Editor, select Index Scroll Nav: Show On Scroll. The Background Color tweak in the Site Header section sets the background color of the fixed navigation when it appears.

Paul

To everyone! If you find this (or any) answer helpful, please vote it up using the up arrow. This will let other users know it's a good answer. You'll find some more Squarespace tips on our website.

@Paul2009 Inside Style Editor, I don't see "Index Scroll Nav: Show On Scroll", only "Index: Page" & "Index: Scroll Indicator"

The Style Editor has many options and so it shows and hides different sections depending on what you are looking at. You must have selected the index page in PAGES before opening the Style Editor, and the Index page must be set as the site's home page. You should then see the option.