Issue with section link scroll

Hello,

I have an issue with the section link scroll (specifically when it’s Tablet all the way to Mobile breakpoint). When I tap on any of the navigation links, the page scrolls way past the actual section. I tap a couple of times after and it doesn’t move. I’ve investigated throughout the forum and I noticed that many had a similar issue and solved it by changing the images load settings to Eager, which I have tried but to no avail. Any help is greatly appreciated!

Here is my site Read-Only: Webflow - MCM Custom Builders Site

You’re scrolling to the right locations, however your sticky nav slightly overlaps the top of your scrolled-to section.

I’ve never found a solution for this that I really like.

CSS has scroll snapping support, which is probably the best approach, however it affects manual scrolling as well.

Here’s a hack I use to adjust the scroll-to position so that you have an offset.

Another option is to use javascript, and calculate the offset you want.
Hey… I think I like that better actually. I might check into how that would work with webflow.js internal scroll-nav feature.

Hey, thanks so much for the reply!

I tried what you suggested but it doesn’t work. What I find strange is that on my Samsung phone, everything works fine. But on an iPhone, it doesn’t work at all. I also tried using both Safari and Google Chrome on the iPhone to see if its a browser issue, but it doesn’t work for both.

ezgif-1-704786eb95

The browser will always scroll where you tell it to.
By default that’s to bring the top of the ID’d element to the top of the window, if possible.

So if you’ve done the negative top margin technique I described, you most likely have your ID’s on the wrong elements.

Check on desktop first, mobiles may have their own scroll positioning rules which you’d need to research per-browser.