• Home
  • Cloud
    • General
    • SaaS
    • BPaaS
    • PaaS
    • IaaS
    • Other Internet Hosted Applications
      • WordPress
        • WooThemes Canvas
          • WooThemes Canvas CSS
  • About me
  • Why Badly Wired?
  • Contact

Badly Wired

Alan's technical notebook - WordPress and other stuff

You are here: Home / Code snippets / Stopping Genesis Full menu loading momentarily before the responsive menu

Stopping Genesis Full menu loading momentarily before the responsive menu

10th April 2018 by Alan 3 Comments

Fully Managed UK Hosting - Only £1+VAT till 1st Jan 2021 on Shared, Reseller and Dedicated Hosting! .... 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.

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…]

Filed Under: Code snippets, Genesis, IaaS, Wordpress  

Comments

  1. fengshui says

    6th June 2018 at 5:16 am

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

    Reply
    • Alan says

      7th June 2018 at 2:31 pm

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

      Reply
      • fengshui says

        8th June 2018 at 4:47 am

        Hi Alan,

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

        Reply

Leave a Reply Cancel reply

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

Categories

  • Applications
  • Cloud
    • General
    • Google Cloud
    • IaaS
    • Other Internet Hosted Applications
      • Wordpress
        • WooThemes Canvas
        • WooThemes Canvas CSS
    • SaaS
  • Code snippets
  • Discounts
  • Genesis
  • Google Apps for Works
  • Linux
  • News
  • SEO
  • Server setup
  • Services
  • Tech Tips
  • Uncategorised
  • Useful Images
  • Useful Stuff
  • WordPress Hosting
  • WordPress Plugins

Tags

background jobs beadcrumbs bind brandings Cache canvas Centos chrome css fail2ban Find firefox Flash fraud genesis gocardless godaddy Google google maps hackers internet explorer javascript KashFlow Linus linux Magento mapquest maps microsoft mysql news nohup php plugin plugins queens diamond jubilee replace SED SEO skype Varnish Virtualmin Webmin woothemes Wordpress

 

Affiliate and Privacy Notices

This site is free to use, but hopes to cover some costs through affiliate income, some products and links are affiliates and may earn the site advertising income.

Some affiliates use Cookies to track if you purchase from them, this allows them to apportion revenue to us you will need to refer to their specific privacy notices as to how you are tracked.

This site is a participant in the Amazon EU Associates Programme, an affiliate advertising programme designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.co.uk.

  • Privacy Policy

Copyright © 2021 · Badly Wired