Stopping Genesis Full menu loading momentarily before the responsive menu

If you find this free website useful – why don’t you support this with a donation? It is easy…. read more ….

Many, if not all of StudioPress’s older themes flash up the full menu for a glimpse before the responsive hamburger comes in.

This doesn’t look great but is easy to fix in 2 steps.

First, tweak the CSS so that the start of the responsive section reads

body.js .genesis-nav-menu {
display: none;
}

the responsive section may for instance start @media only screen and (max-width: 800px) {
And the add the plugin ‘Genesis JS / No JS’ by the every well respected Gary Jones https://en-gb.wordpress.org/plugins/genesis-js-no-js/

However, you may not want to add yet another plugin, and the code is simple to add to your functions.php, thi sis my version of Gary’s code and does the job just fine.

add_filter( 'body_class', function ( $classes ) {
	$classes[] = 'no-js';
	return $classes;
} );
add_action( 'genesis_before', function () {
	?>
    <script>
        //<![CDATA[
        (function () {
            var c = document.body.classList;
            c.remove('no-js');
            c.add('js');
        })();
        //]]>
    </script>
	<?php
}, 1 );

 


Posted

in

, , ,

by

Tags:

Comments

4 responses to “Stopping Genesis Full menu loading momentarily before the responsive menu”

  1. fengshui avatar

    Hi, thanks for the code. When I tried implementing it on site, it works well but it will also hide the secondary menu on mobile responsive (non hamburger).

    1. Alan avatar
      Alan

      If you want it to impact only a single menu, you need to qualify the css further, this probably will work for you but as all themes may be different, you are best to inspect with browser debugging and find the correct selector.

      body.js .genesis-nav-menu.menu-primary {
      display: none;
      }

      1. fengshui avatar

        Hi Alan,

        The new css works. Cleared the cache, Cloudflare cache and incognito mode. Hope it is okay. Thanks very much.

  2. AJ avatar
    AJ

    After lots of trial and error, I found this to be the simplest and most effective solution (no flashing of menu items whatsoever) for my Genesis setup:

    @media only screen and (max-width: X) {
    .genesis-nav-menu {
    display:none
    }
    }
    *Replace “X” with the screen size in pixels at which your theme adds the responsive menu icon (i.e., “hamburger” menu).

    I also add height values to .nav-primary to prevent layout shift while responsive icon loads.

Leave a Reply to fengshui Cancel reply

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