[Resolved] Stick header – HTML anchors are not “hit”

[Lutz]

Hi.
I have a page with an HTML anchor #checkliste – implemented with the elementor widget “menu anchor”.
The anchor works fine – when entering the URL the browser scrolls to the top of the anchor element.
But if I activate GP sticky headers, the sticky header covers the top of the page – so the top of the “anchored” element is partially covered and invisible.
URL and access codse in private information area
-Lutz

[David]

Hi there,

GeneratePress has its own Smooth Scroll option ( in Customizer > General ) which offsets the scroll position for the Sticky Nav to stop this kind of thing…. BUT that option will cause issues if you’re using Elementor as it has Smoot Scroll also which will conflict.

you would need to ask Elementor support if they have a fix for that.

[Lutz]

Hi David.
Perhaps my description was ambiguous …

I’ve now deactivated Elementor and created a page ONLY with the classic wordpress editor. No more Elementor items are on the page, at all.
=> same effect:

Without GP sticky headers: scrolls to the correct y position
WITH GP sticky headers: scrolls 60 pixels too far (which is exact the height of the stiky header bar)

I don’t think that could be an Elementor issue …

-Lutz

https://akn-test.lvo-webgo.de/scrolltest#myanchor

[David]

That URL requires a login 🙂

[Lutz]

Ok, I gave the login at my first post – you’ll find it in the private data area below.
-Lutz

[David]

Can you disable any cache/optimization plugins so i can see what scripts are loading?

[Lutz]

Done.
-Lutz

[David]

In Customizer > General – do you have the GP Smooth Scroll enabled ?

[Lutz]

I just tried it – no change …
-Lutz

[Ying]

Hi Lutz,

I see that you’ve added the smooth-scroll class to the section itself, it should’ve been added to the link.

I added a menu item with #myanchor as link, and with the smooth-scroll class using developer tool to show you how it would work if all settings are correct:
https://www.screencast.com/t/E7pothFZEF

[Lutz]

Hi.
Ok, I now understand the idea of the “smooth-scroll” class =;-)
– but this does not solve my problem.

I want to send the URL via E-Mail as link to a specific section of the page:
https://akn-test.lvo-webgo.de/scrolltest/#myanchor

This works without sticky header and does not work with sticky header.

-Lutz

[David]

Yeah, thats not something we can change, as our script only fires if its from a link with the smooth-scroll class.
There are plugins like Page Scroll to ID that do this.

OR you need to add the Anchor to a GB Container Block or Group Block, which can have padding added to it to compensate for this.

[Lutz]

Hi, thanks!
“Page Scroll to ID” works.
“add the Anchor to a GB Container Block or Group Block” is a good idea, too.
-Lutz

[David]

You’re welcome

[Author]

Posts