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
  • Views 8.2k
  • 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.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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.