[Resolved] Navigation Jumps on page load (Due to Mobile Menu Icon)

[Struan]

Hello.

My client’s site has a main menu that seems to jump down the page when the page is loading:

It seems to be caused by the mobile menu icon appearing for a split second above the menu.

What could be causing this?

Thank you so much.

[Struan]

Sorry, i provided the wrong password in the support ticket above.

[Struan]

I just noticed that this issue is OK in chrome. I only see it on Firefox.

Thanks

[David]

Hi there,

can you try disabling the Critical CSS option in WP Rocket.

[Struan]

Ok, i disabled that, and cleared the wp-rocket cache, cloudflare cache, and browser cache – no luck.

It’s definitely something to do with the cache though, because when I am logged into the wp-admin, the cache is disabled and the error is fixed…

Any thoughts?

[David]

See this topic here, which has the same cache setup and similar issues:

https://generatepress.com/forums/topic/high-cumulative-layout-shift/#post-1545764

Try those two fixes first. Let me know once those changes are made then i can take another look.

[Struan]

Thanks.

I’ve added the function and disabled Critical CSS in wp-rocket.

I’ve cleared all the caches… but still no luck.

[David]

I am not seeing the mobile icon appearing before loading the desktop nav.
What i can see is the Desktop logo image is still being lazyloaded which is causing a layout shift.

Try the function that WP Rocket provides here: Example 2: Exclude an image based on its filename

https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

[Struan]

Ahhhh…that’s fixed it! Thanks so much for your help, David 🙂

[David]

Glad to hear that!

[Author]

Posts