[a.j.drenthParticipant]

This reply has been marked as private.

[a.j.drenthParticipant]

@jtwilia2

Try changing it to: .genesis-nav-menu ul {display:none}

It seemed to work when I tried it in page inspector.

[a.j.drenthParticipant]

Hey Anita,

I wasn't trying to throw shade at Studiopress, whose products I've been happily using for years. I do think that if there's an elegant fix available, Studiopress should consider helping its legacy theme users with a solution, perhaps via Genesis core updates if feasible.

I agree with you that CLS is a relatively new and multifaceted issue. In my case, however, the menu item flashing problem was accounting for roughly 2/3rds of my CLS score. Once I implemented the above fix (and also added height values to the .nav-primary class at different screen sizes to prevent layout shifting while the icon loads) the score (and user experience) improved dramatically.

Thanks for your work moderating this forum!

[a.j.drenthParticipant]

I put a lot of hours into this issue. I tried the plugin mentioned above as well as PHP solutions. Nothing consistently changed the Google CLS score.

Fortunately, I think I finally found the solution. When I saw how simple it was, I almost kicked myself.I'm using the Outreach Pro theme, but I suspect this will work for other Genesis themes as well. I'll provide the solution, followed by an explanation:

@media only screen and (max-width: X) {
.genesis-nav-menu {
display:none
}
}
Note for "X" add the screen size in pixels at which your theme adds the responsive menu icon (i.e., "hamburger" menu).

Since I didn't know much Javascript, I never bothered to try the above solution previously. But after I learned about how the Javascript / JQuery "toggle" function works (which is used in your Genesis child theme), I learned that it essentially reverses whatever your CSS display setting is on an element (i.e., If the CSS is set to display:none, it will display it. Then, if clicked again, it will hide it.). Knowing this, it makes perfect sense why we would want the menu hidden until the hamburger icon is clicked.

Next question: Why doesn't Studiopress just code it this way to begin with? I suspect it's because they want the navigation menu to be displayed for users who don't have Javascript enabled. But research suggests that only 1-2% of web users don't have Javascript enabled. So unless you're okay with compromising your site's UI/UX for a handful of individuals who, for whatever reason, have chosen to disable javascript in their browser, this seems like an obvious solution to the problem.

BTW, I was shocked at how much cleaner my page loads look have looked since implementing this solution. Truly a night and day difference. You'll never see an unwanted menu item again:)

[a.j.drenthParticipant]

I resolved it without use of FTP. Thank God!

[Author]

Posts