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
|
1 2 3 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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 ); |
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;
}
Hi Alan,
The new css works. Cleared the cache, Cloudflare cache and incognito mode. Hope it is okay. Thanks very much.