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.
Fully Managed UK Hosting - Only £1+VAT till 1st Jan 2021 on Shared, Reseller and Dedicated Hosting! .... read more ....
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 );
[Next] Find out where to host WordPress [Read the full article…]
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.
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.