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.
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.
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.
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.
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.”
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!
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.
@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.
@Chuck_Braman@drew-eastmead I know this is quite a while afterward but I wanted to put this here for others who come looking for this… setting negative margins + padding is clumsy and can cause some unintended div interactions. I found a pretty decent way to get around this:
Put a div within the div I want to anchor to, set position to Absolute.
Add a negative position-top modifier like -25% and set height to 0px.
Set that div ID as the anchor you want linked.
This will not cause any unintended div interactions, won’t be visible as it’s an empty div with 0 height, and you can customize the offset per viewport without having to modify all of your Classes.
Cheers!
ETA: Hopefully Webflow adds support for scroll-margin-top at some point.