How to use scroll-margin-top for anchor links

Ask us anything
1

Hi all,

I am using anchor links to navigate to sections of my page.

I understand I can use the scroll-margin-top css to offset the scroll position of my links so that the top of the scrolled area is not covered by a sticky menu, but I’m having trouble getting this to work.

Where should I put the scroll-margin-top code?

Thanks!

2

Hey @ilan !

You can try to put a custom css (last property of the style sidebar) looking like this on your concerned sections:

scroll-margin-top: 20px

If this doesn’t work, could you give me more details about your page structure?

3

@Kevin thanks so much for the response and apologies for the delay in replying.

This was very helpful, and it’s now working :slight_smile:

Thanks again

1 Like
4

Hello Kevin !

I used the technic you mention but I can’t get the same result.

I’m wondering if something is not done correctly here.

Here is a quick video of my configuration :

Thank you!

5

Hello @flo !

How are you ?

Any idea on how I can improve this by any chance ? :slight_smile:

Thank you !

6

Sorry for the late reply @lighthama2 !

Did you try putting the scroll-margin-top: 20px on the Bedrooms container, not the section?