Main menu on mobile devices appears open for a split second

[daniteq]

Describe the bug On mobile devices, upon page load, the main menu appears open for a brief period of time before disappearing. On production sites, this doesn't translate to a good design.

To reproduce Steps to reproduce the behavior:

1. Inspect https://demo.studiopress.com/genesis-sample/ and switch to mobile view.
2. Reload the page to experience the issue

Expected behavior The main menu shouldn't appear on screen upon page load. Maybe the script to hide the menu on mobile devices isn't loaded before body html dom starts building hence the issue.

Screenshots Here is a screen recording slowed down to 0.25x playback speed. https://screencast-o-matic.com/watch/cqQQVRtzN7 This might look insignificant, but it is not on production sites which have higher page load times.

System information (please complete)

• OS: Windows 10
• Browser: Google Chrome
• Version: 76.0.3809.132

[vynnus]

This is happening to my website as well It has a deep impact on Google Core Web Vitals metric "CLS issue: more than 0.25 (mobile)" All the pages from my website are affected by this wrongly loading behavior of the menu in mobile.

@danishmuneer did you find a temporary fix while the update is released?

[dharmendra123456]

The same problem is on my website How To Kaise , Because of this, cls .25 is coming. Someone can suggest a permanent solution for this.

[dhananjaygbhardwaj]

@vynnus @dharmendra123456 You can add js/no-js class to the body using Gary Jones plugin or by using the following code:

add_filter( 'body_class', 'prefix_body_class' );
/**
 * Adds a css class to the body element.
 *
 * @param  array $classes the current body classes.
 * @return array $classes modified classes.
 */
function prefix_body_class( $classes ) {

    $classes[] = 'no-js';

    return $classes;

}

add_action( 'genesis_before', 'custom_add_js_class', 1 );
/**
 * Removes `no-js` class and adds `js` class to the body element before Genesis is loaded.
 */
function custom_add_js_class() {
?>
    <script>
        //<![CDATA[
        (function(){
        var c = document.body.classList;
        c.remove( 'no-js' );
        c.add( 'js' );
        })();
        //]]>
    </script>

<?php }

Once done, add the following CSS:

.js nav {
    display: none;
}

@media only screen and (min-width: 960px) {

    .js nav {
        display: block;
    }

}

Source: https://sridharkatakam.com/improvements-in-genesis-sample-2-6-0/

I have been using this fix for some time now, and it works great.

[vynnus]

@dhananjaygbhardwaj thank you very much!

[daniteq]

Thank you @dhananjaygbhardwaj this looks promising. Unfortunately, I ended up moving away from genesis framework. The final nail in the coffin was their recent bloated updates to Genesis child themes with their own customizations of WooCommerce.

[dhananjaygbhardwaj]

@vynnus This issue was brought up by the same developer here: #102

The issue was closed when menu scripts were moved to the core Genesis Framework.

The issue could mostly be observed on slow connections before the JS is loaded. But that also means CLS issues. In my personal experience, CLS will be there but reduced dramatically.

Anyways, this really seems to be a promising solution.

@danishmuneer I couldn't help but agree. For me, the framework fits right into my project so I have to do with it. I just kick out all the WooCommerce, Block Editor, and AMP related stuff that I don't need.

OT: But what have you moved on to? Curious.

[daniteq]

That's fair. I truly loved Genesis framework because it was lightweight and very customizable.

Not sure if I should mention a rival platform here, we have moved to Oxygen builder so we don't even need a theme anymore! Site performance etc. is same, even slightly faster I would say and we have a nice page builder that our content team uses for regular updates.