Remove Default Mobile Menu from Underscores

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

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
clear: both;
display: block;
float: left;
width: 100%;
}
.main-navigation ul {
display: block;
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
float: left;
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 1.5em;
left: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a,
.main-navigation li.focus > a {
}
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
}
/* Small menu. */
.main-navigation.toggled ul {
display: block;
}
.menu-toggle {
display: none;
}
@media screen and (min-width: 37.5em) {
.main-navigation ul {
display: block;
}
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}

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.

 

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?

    • 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

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

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

Leave a Comment





%d bloggers like this: