[Resolved] How to push down the headline a little bit with CSS using anchor links

[Karsten]

Hi Guys,

on several pages I use anchor links for jumping to list points as you can see here

Please click on any of the 10 list points at the beginning of the article and you will see that you jump not directly to the headline (h2) but lower.

My question is how could I move the page down a little bit using CSS in order to see the headlines?

The CSS class we could use here is .anchor

Thank you for any helpful suggestions.

Karsten

[David]

Hi there

are you able to edit those links in your list? Or is it a plugin? We can use the GP Smooth scroll to get around the issue. Let me know.

[Karsten]

Hi David,

no, I don’t use a plugin.

I don’t know why the anchor link is not showing on top of the screen.

I also don’t know if GP Smooth scroll would be the right fix for this issue.

Please advise what to do. Thank you

[David]

If you activate the smooth scroll in the Customizer > General. Then give each of your links a class of smooth-scroll eg.

<a class="smooth-scroll" href="url">My link</a>

Smooth scroll knows the sticky navigation is there and offsets the jump position.

[Karsten]

I have done what you have suggested. But still the sticky navigation covers the headlines.

Could you please check and let me know why Smooth scroll does not work.

Thank you

[Tom]

The links seem to be missing the smooth-scroll class.

Can you make sure they all have the class?

[Karsten]

yes, thank you

now i have put the missing class at the right place.

Great support!

[Tom]

All working now? 🙂

[Karsten]

yap, all working now.

Thank you very much.

[Tom]

You’re welcome 🙂

[Author]

Posts