Section ID link not behaving

A section ID link in a site I’m designing is exhibiting some unwanted behavior.

When the link for the “About” section in the nav menu is clicked, the page at first scrolls down to the right spot, but quickly jumps to a different, wrong spot.

I’ve made a brief video that demonstrates the issue here: Loom | Free Screen & Video Recording Software

Any insight/advice would be appreciated

Thanks.


Here is my site Read-Only: *Webflow - Organic Web Design

Hey @Chuck_Braman , the anchor link seems to work as intended on my end (Mac Chrome Browser). Can you see if the issue persists in incognito mode? It could be a cache bug.

1 Like

Hi @imtiazraqib ,

Thanks for taking a look at this.

Odd that it works for you. I’m also using Mac Chrome, but I experience the issue whether or not I use incognito mode.

Interestingly, I tried publishing the site and the problem still persists, but much attenuated, just a little jump up: https://organic-web-design.webflow.io/

I think it has something to do with an interaction between the fixed nav bar, and the first section. If I change the nav bar to static, the problem goes away. But, of course, I want the nav bar to be fixed.

(With Sticky, the problem also goes away, but of course then the section tucks under the nav bar, which I also don’t want.)

This is a crude workaround but set your Nav as position: sticky and add extra padding, so say 140 on the top of your sections. This gives it enough space for it to be visible on anchor links, and design aesthetic wise, it isn’t too bad IMO.

1 Like

Thanks, @imtiazraqib,

I tried position: sticky and it looks good on the sections except for the top section that is set to 100% vh, the bottom margin of which it pushes down below the viewport. I’ve always had that issue with using position: sticky on a navbar because nearly every opening section on most of my sites is 100% vh.

I’m sorry to be back again with this problem, but it’s actually spread from the 1st section to all the sections on my website and, even apart from a solution, I’m curious whether anyone might know if this is a problem that is intrinsic to fixed navigation interacting with section ID’s, or if it is a bug in Webflow, or if it is just something I’m doing wrong or could be doing differently.

The reason I suspect there is a cause and a solution to this problem now is that it didn’t used to affect the sections other than the first, now it affects all.

Here’s a link to a new 2-minute video demonstrating the behavior: Loom | Free Screen & Video Recording Software

Here’s a fresh share link to the project: Webflow - Organic Web Design

Hey @Chuck_Braman , you could try a custom code solution using the scroll-margin-top css property.

The link above is in reference with sticky headers but you could try it with a fixed header.

Here is a more detailed custom solution for fixed headers and anchor links you can take a look at

1 Like

Thank you very much @imtiazraqib

The first solution didn’t work for me, and I couldn’t quite figure out how to implement the second one within Webflow.

But at least I know now that this is expected behavior, and I’m going to have to work around it somehow.

I would think that a demonstration of a solution within Webflow for this particular issue would make a great topic for a Webflow University video since, as the author of the second article mentions, “Linking within a page is a natural case for using a fixed header.”

2 Likes

Ahh @Chuck_Braman , that’s unfortunate. Sorry I was not able to help you sort this out. I agree, since I am currently in the midst of working on a site with a fixed header!

@imtiazraqib,

I was able to come up with a straightforward workaround based on your original suggestion that seems to be working for me for now, at least in my current iteration of the design. If your navbar is 70px tall, for example, in the sections, add negative top margin -70px, and positive top padding 70px.

1 Like

@Chuck_Braman for the win! After 2 hours of reading articles, experimenting with code, CSS, etc… your solution worked when everything else was failing for me. Thank you so much.