[Resolved] Snap scroll disables sticky header

[Encrypto]

Hi,

I am working with Elementor Pro v3.7.1 and when I enable “snap scroll” on the page, it appears to stop the sticky header from working at all.

Do you have any suggestions?

TYIA!

[Fernando]

Hi Encrypto,

I see. To clarify, do you have Sticky Nav turned on for both Desktop and Mobile?

Does this Snap Scroll function work for all views as well, and do you have it turned on right now?

Kindly let us know.

[Encrypto]

Hi Fernando,

Yes sticky nav is switched on for both desktop and mobile.

Snap scroll works on both desktop and mobile.
It is currently active no this homepage I shared with you.

If I deactivate scroll-snap and change nothing else, the sticky nav comes back and works as expected.

In Elementor it can be toggled on and off by going to “page settings” > “Advanced”

[Fernando]

I see. Thank you for clarifying.

Perhaps you can reach out to Elementor as to why the Snap Scroll functionality is affecting the JS of the sticky nav functionality in GP?

Otherwise, we can probably use custom CSS to make the nav Sticky.

For instance, you can try adding this CSS in Appearance > Customize > Additional CSS:

nav#site-navigation {
    position: sticky;
    top: 0;
}

nav#mobile-header {
    position: sticky;
    top: 0;
}

Kindly let us know.

[Encrypto]

Hi Fernando,

Thanks for your support, your CSS provides a usable workaround.

I have spoken with Elementor support and they advised that this functionality is still in experimental stage and that is most likely the result of the compatibility problems.

Thanks again!!

[Fernando]

You’re welcome! Glad to be of assistance!

[Author]

Posts