how to edit Underscores theme mobile responsive menu

I too had issues with this, and I think I just got it working on mobile!

The following CSS may need some tweaking to fit your needs, but at least the button is now outside of the nav container and able to be tucked up to the right like we see on Bootstrap and other common designs.

As long as you didn’t butcher the _s template files too much, this should work:

Open navigation.js and change line 9 to use the next ID up the DOM from “site-navigation”, which is “masthead” like this:
container = document.getElementById( 'masthead' );

Then, scroll to bottom of that file where it starts with “button.onclick” and change all the mentions of “container” to “menu” like this:

button.onclick = function() {
		if ( -1 !== menu.className.indexOf( 'toggled' ) )
			menu.className = menu.className.replace( ' toggled', '' );
		else
			menu.className += ' toggled';

Now, open header.php and find the <button class=”menu-toggle”>…</button> tag. Move it up above the <nav> tag. Mine looks like this (contents removed for brevity):

<button class="menu-toggle">
...
</button>
<nav id="site-navigation" class="main-navigation" role="navigation">
...
</nav>

As for the CSS, I updated the ‘Menus’ section media query to be:

@media screen and (max-width: 600px) {
	.menu-toggle,
	.nav-menu.toggled {
		display: block;
	}
	.nav-menu.toggled li {
		width: 100%;
		text-align: right;
	}
	.main-navigation, .nav-menu.toggled, .menu-toggle {
		float: right;
	}
	.main-navigation ul {
		display: none;
	}
	.menu-main-menu-container {
		float: right;
	}
}

Thanks for that tristandenyer, but is this the unique solution?

– I’m having difficulties to find how to change or edit width of menu for mobile change.

Thanks!

Not sure what you mean by “the unique solution”. It worked for me 8 months ago, but know that the _s code likely changed since then. Try it and see if it works for you.

I didn’t have to mess with the width, as far as I remember.

Hi, I am having the same issue with moving the toggle button outside the site-navigation-id (also using underscores starter theme). I tried your suggested code but it didn’t fix it. Could it be because my toggle button is up in my header wrapper?

<div class="header-wrapper">
...
	<h1 class="menu-toggle"><?php _e( '<i class="fa fa-bars"></i>', 'diy-blooms' ); ?></h1>
	<div id="search-container" class="search-box-wrapper clear">
		<div class="search-box clear">
			<?php get_search_form(); ?>
		</div>
	</div>
</div>

<nav id="site-navigation" class="main-navigation" role="navigation">
	<div class='nav-wrapper'>

		<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'diy-blooms' ); ?></a>
		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
	</div>
</nav><!-- #site-navigation -->

Is there anything different I need to do in the navigation.js file because of this?