My anchor links (Top Menu Items) are not scrolling to the correct position - they scroll past the Section Title I am linking to. The Title gets cut-off by the Navigation.
I have read a few topics, but can’t seem to find an answer.
Also, greetings from sunny Wellington (well sunny today!), I hope you’re well.
Can you check to see where the anchor links for the nav links have been placed. It looks like the ‘Services’ anchor is placed on the ‘header-box-2 element’, it may need it on the ‘content-section-11’ element.
(checked using the ‘inspect element’ tool in the browser) - If you don’t mind sharing a ‘Read-Only’ link we can check the exact goings on.
This solution didn’t work for me or I didn’t understand it idk. So I came up with a new solution that gives me a way to control the offset distance without custom code. I’ll be back to comment on any future pitfalls or improvements I make.
Add a div inside the element you want to stop scrolling at. Give it a height (1px). Now give it a class (anchor) set its position to absolute and make the top value a negative number. (-150). The size of that number is what controls where the pages stops scrolling.
Now as long as the parent of your anchor div element is relative you can drop that into anything giving you trouble and that is your new anchor link.
That works great, thank you. Whatever the depth of your fixed menu, backtrack the margin on the invisible object by the same amount. And so important as you say to set the parent to relative.
Here’s another solution using custom code if you don’t want the extra divs. I’ve used both solutions in the past depending on the site and how many people are working on it. Personal projects I use divs. But collaborative projects I use code since it’s easier to understand at glance. #138 - Anchor Link Scroll Offset | Webflow Powerups