Shifting hamburger Menu on mobile devices

[flyinjamParticipant]

Hi! I’m having a bit of a speed problem with the mobile hamburger menu. When it first loads, it shows all the menu options like it would by default on desktop without the hamburger menu, then gradually it shifts and turns into the hamburger menu after a couple of seconds or so. Is there a way to stop this from happening? It seems to be causing issues with cumulative layout shift results, also.

I have previously been pointed in the direction of transitions, but this seems to just manage how long it takes to shift rather than eliminating the shift? Thanks!

http://www.vinylchapters.com

[AnitaKeymaster]

Hi @flyinjam I think the Genesis developers are working on a solution for this. In the meantime, this is what's working for us so far.

Install Genesis Js No-JS plugin by Gary Jones - https://wordpress.org/plugins/genesis-js-no-js/.

Then add this snippet of CSS to your theme.

.js nav {display: none;}
@ media only screen and (min-width: 1024px) {
.js nav {display: block;}
} 

Note - do not put the space between the @ sign and the word media. I had to do that because the forum was turning it into a link.

---

Love coffee, chocolate and my Bella!

[flyinjamParticipant]

Thanks Anita, much appreciated. Would I need to amend if the Genesis developers fix it? Also, is there any chance adding this workaround would create any slowdown?

Thanks

[AnitaKeymaster]

Hi @flyinjam from my usage it's not slowing anything down. It just makes the hamburger menu behave better. What tools are you using to check for layout shift? Are you using Chrome with Lighthouse where it turns things blue that shift?

---

Love coffee, chocolate and my Bella!

[flyinjamParticipant]

Hi Anita,

Yes, it's definitely behaving better than it was!
As for testing CLS, I'm just using PageSpeed Insights and testing a few backend changes through WP-rocket and other things at the moment - it's a bit like getting sucked down a rabbit hole at times, however!

[AnitaKeymaster]

I have seen others complain about WP Rocket. Test your settings with different plugins. I know I am on SiteGround and the SG Optimizer works well. But then if I switch to Autoptimize, it get's better. I posted in the Genesis Facebook group a link to a blog I used for Chrome. If you're in the FB group, go look for it. If not, send me a message on my website and I'll share it with you and how I use Chrome.

---

Love coffee, chocolate and my Bella!

[flyinjamParticipant]

I'm using WP-Rocket and Autoptimize at the moment. I'm on tsohost as a host at the moment but I have heard good things about SiteGround and the SG Optimizer. I've just requested to join the FB group and I'll search for your post when accepted. If I can't find it I'll drop you a message. Thanks again for this great help.

[AnitaKeymaster]

You're welcome. Hope to see you soon on Facebook!

---

Love coffee, chocolate and my Bella!

[Author]

Posts