Remove Default Mobile Menu from Underscores

June 14, 2015 -

WordPress Underscores theme comes with a default primary menu that toggles to a mobile menu button at 600px wide. If your project requires using another mobile menu solution it is best to remove the existing one and here’s how.

underscores mobile menu

 

You can disable this menu and behaviour by removing the wp_enqueue_script to the navigation.js file in functions.php

 //wp_enqueue_script( 'underscores-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

Then in style.css tweak the menu section

Since the mobile button is now gone you can also remove the button mark up from header.php

 <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'underscores' ); ?></button>

Now you can add in another mobile menu solution without any conflict.

 

Related Posts:

Categorized WordPress Tagged , ,

4 Comments

  1. Dalton on December 24, 2015 at 8:29 pm

    I’ve followed through this guide exactly, and now the menu bar is disappearing altogether at 599px. Do you know why that would be happening?

    Reply
    • Neil Gee on December 26, 2015 at 11:50 pm

      Probably a CSS issue, make sure the edited CSS sits below or replaces the current style- issue maybe with a rule like this
      @media screen and (max-width: 600px)
      .main-navigation ul {
      display: none;
      }

      If you have this then change none to block

      Reply
  2. PMRenault on September 14, 2015 at 10:11 pm

    Thanks for the helpful post. Do you have a suggestion for a replacement?

    Reply

Leave all Comment