Community Forums › Forums › General Genesis Framework Discussions › Shifting hamburger Menu on mobile devices
Tagged: hamburger menu, mobile, shift
- This topic has 8 replies, 1 voice, and was last updated 1 year ago by
hutre12386.
-
AuthorPosts
-
February 25, 2021 at 6:20 am #503212
flyinjam
ParticipantHi! 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.comFebruary 25, 2021 at 2:36 pm #503217Anita
KeymasterHi @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!
March 2, 2021 at 11:47 am #503278flyinjam
ParticipantThanks 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
March 2, 2021 at 12:56 pm #503281Anita
KeymasterHi @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!
March 2, 2021 at 1:58 pm #503283flyinjam
ParticipantHi 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!March 2, 2021 at 2:19 pm #503284Anita
KeymasterI 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!
March 2, 2021 at 2:29 pm #503285flyinjam
ParticipantI'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.
March 2, 2021 at 2:47 pm #503286Anita
KeymasterYou're welcome. Hope to see you soon on Facebook!
Love coffee, chocolate and my Bella!
September 3, 2022 at 1:00 pm #505754hutre12386
ParticipantI have a toolbar and navigation drawer activity in android. Now I want to shift ham burger icon (navigation drawer icon) to right side of hy-veesurvey.com
-
AuthorPosts
- You must be logged in to reply to this topic.