Jump to content

Enable Scrolling Navigation Links with Fixed Header

Recommended Posts

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!

Link to comment
  • Replies 5
  • Created
  • Last Reply

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 month later...

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


I post free answers because I want to help fellow Squarespace users - I'm not selling anything. In return please Accept an answer if it is correct. If it didn't help, feel free to ask for more help or wait for others to add their comments.

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 6 months later...

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.