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/)(.*)
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
Hi there,
Sorry I missed out on your comment, I didn’t think that it would come up on search.
Is it sorted now?