Mobile Menu CLS (Cumulative Layout Shift) Issue with Digital Pro

[mrmedoz]

Thank you for this tip

[Asidert]

It seems to me that the issue is not related to a child theme but rather a component of its core framework, as I mentioned earlier. The framework demo also shows the menu for a few milliseconds, but it disappears. The navigation menu is dynamically displayed by using display: none and display: block properties, so from my perspective, this is not intended to avoid CLS but rather to work as a display: block. Because the CSS elements containing the classes we need to display in the navigation menu are not yet loaded, the display: any property of the navigation menu HTML element is missing by default because the CSS elements containing the classes are not yet loaded.
I am unaware of any workaround for this issue, but there may be a workaround. I think that if we could add the display: none property right to the HTML Nav element without waiting for the button to be touched, then we would be able to resolve the issue. Does this issue have a workaround?
It is for the sake of search engines, but from the point of view of the user too, that this is not only the case here but also from the user's point of view. Seeing an unwanted menu item show up and then disappear all of a sudden seems pretty lazy when this can be accomplished by touching the menu toggle to make it appear.

[patricklm]

I got rid of this problem on my site (using child Theme: Daily Dish Pro) using this advice:

How to FIX Mobile Menu CLS issue in Genesis theme

Application: Insert it to C

ustom CSS inside Appearance >> Customize >> Additional CSS

Currently working

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

[Author]

Posts