[Resolved] Page jump issue with sticky nav

[Ryan]

I’ve noticed an issue since I switched on the sticky navigation on mobile. When the nav id changes from “sticky-navigation” back to “site-navigation” or back there is a jump in the page. It’s like the height of the “site-navigation” is removed or added to the page and causes a jump. It’s not a huge deal but it doesn’t feel good on mobile to have a page jump like that. Have you noticed this issue? It’s very noticeable here https://www.ryansmithphotography.com/myrtle-beach-wedding-photographers/

[David]

Hi there,

thats real peculiar the sticky placeholder isn’t getting the correct height.
Try adding this CSS to fix that:

@media (max-width: 865px) {
    #sticky-placeholder {
        height: 60px;
    }
}

[Ryan]

Thanks that was a simple fix. I notice the height is set to 0 in your css. I tried going into customizer and resetting the sticky menu height then setting it back. I also tried regenerating external css. So there might be a bug in the theme to check.

[David]

The theme uses Javascript to calculate the height of the Navigation and then applies that height to the Sticky Navigation placeholder. This is to handle any responsive size changes.

Theres something on your site that is interfering with that script, but i couldn’t see what was blocking it. Generally if that happens i would expect the whole sticky nav to stop working… very peculiar. Hence the simplest fix was to provide some CSS that worked.

[Ryan]

I do have jquery-migrate blocked because it doesn’t seem needed. Is this still used? I was actually wondering why that was still being loaded because it’s not loaded by default with wordpress anymore.

[David]

Had a little nose around… GP only enqueues jQuery for the Sticky Navigation. Which includes the jquery handle in its dependencies… which turns out includes jquery-core and jquery-migrate – would have been nice if they updated the WP Codex to let us know that lol

We’ll be changing that in a future update as migrate is not required.

Thanks for pointing that out.

Just to cover – disabling jQuery Migrate won’t affect the sticky nav and it doesn’t break the sizing script… so its something else interfering with that script.

[Rafał]

Seems you need to go one step farther to fix this.

[Author]

Posts