Anchor Links (Menu links) are not scrolling to correct position (Title gets cut-off)

Hi there,

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.

Please see my page here: https://st-martins-law.webflow.io/layout-1/home

Hi @rosespotdigital,

Welcome to Webflow and the Webflow community.

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.

See if that helps.
Keiran

Thanks Keiran,

That was easier than I thought, thanks for your help!

1 Like

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.

1 Like

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.