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 );

 

, , ,

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

  1. 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).

    • 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;
      }

  2. 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 AJ Cancel reply

Your email address will not be published.