How to FIX Mobile Menu CLS issue in Genesis theme

The CLS issue is extensive and quite bothersome… The Mobile Menu CLS issue is nearly 0.10s, more or less depending on the server’s performance.

Below are some custom CSS you may try depending on the Genesis Theme version you are in and the child theme you use.


Application: Insert it to Custom CSS inside Appearance >> Customize >> Additional CSS

Currently working with all child-themes

@media only screen and (max-width: 768px){
#genesis-nav-primary {
	display: none;
}
}

Child Theme Variant

Name: eleven40 Pro Theme

Working CSS values for it is in the below box (if the above doesn’t work for eleven40 Pro)

@media only screen and (max-width: 960px){
.genesis-nav-menu{
    display: none;
}}

Alternative (Older theme versions)

@media only screen and (max-width: 768px) {
.genesis-nav-menu ul {
display:none;
}
}

OR

@media only screen and (max-width: 768px) {
.genesis-nav-menu {
display:none;
}
}

Make sure you are using an adequately sized logo, and if you are using TEXT based logo, then make sure it’s not too long.
The result should be good, with almost no CLS issues.

Note: If you are delay-rendering JavaScript, remove the JS file named responsive-menu; this will allow the menu to load and function on time if the visitor needs it.

The above JS issue is common with WP Rocket 3.9.* users, and if removing responsive-menu.min.js doesn’t work, then opt to allow all the JS inside the wp-content and wp-includes by using:

(?:/wp-content/|/wp-includes/)(.*)

Saurabh
Saurabh

I am a Wed SPEEDSTER and a Web Developer who is currently pursuing FullStack Web & App development.

I am one of those people who want to learn almost anything that is fascinating or is gaining some interest so mostly I learned everything in every field but still a lot to dig in.

Articles: 2

2 Comments

  1. Hi Saurabh,

    I was hopeful when seeing your article. I have tried your suggestions, but unfortunately not working. I am using Genesis Parallax Pro – do you have any other thoughts for this child theme? Thanks much,
    Rich

Leave a Reply

Your email address will not be published. Required fields are marked *