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/)(.*)