Underscores – responsive menu

I believe that it is responsive with the base underscores theme install. However, I do like to customize my mobile menu’s more than the default so I typically strip out their mobile and use my own.

Are you familiar with CSS and simple jQuery to addClass and removeClass? Create your mobile menu in a div, put your menu code inside it or I like to use a plugin that allows me to use menu shortcodes in theme pages. Then hide this div and it’s contents when the page loads and then use jQuery to add a class of ‘visible’ or whatever you call it, that has CSS for display:block or whatever. I prefer a full screen mobile menu, so I do
height:100vh; width:100%; position:absolute; top:0; left:0;

For the actual hamburger looking part, that’s html:

<button id="js-menu-toggle" class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
	<i id="offscreen-toggle-icon" class="fas fa-bars"></i>
	<span class="menu-text">MENU</span>
</button>

I also like to keep the hamburger visible sometimes on desktop in addition to a top nav just so the hamburger is consistently in the same place. Depends on the project though.

Thanks for that. As you pointed out, the underscores menu is actually responsive but once you reach a certain breakpoint, instead of a hamburger, it shows a bare button (Mobile Menu) and when you click on it, it displays nav options horizontally underneath the button. So it’s all about styling then. The jquery functionality seems to be done via navigation.js that understrap loads.

At the moment the markup on the menu is:

<nav id="site-navigation" class="main-navigation">
   <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'my-slug' ); ?></button>
	<?php
	wp_nav_menu( array(
	'theme_location' => 'menu-1',
	'menu_id'        => 'primary-menu',
	) );
?>

</nav><!-- #site-navigation -->

And the css:

.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
    left: 100%;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
    left: auto;
}

.main-navigation li {
    float: left;
    position: relative;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

/* Small menu. */

.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 37.5em) {
    .menu-toggle {
        display: none;
    }
    .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%;
}

Is there an easy way of changing it to work with a hamburger icon? I tried your button version but it didn’t work. By the way, why do you need the span element in the button?

Thank you.

You don’t need the span element, I just like to have it say ‘Menu’ next to the hamburger sometimes. You could omit the entire thing out if you’d like.

This php <?php esc_html_e( 'Primary Menu', 'my-slug' ); ?> in between the button just pulls in the menu name, so you could omit that. You’ll need to remove the CSS around the button that gives the background and the border. Try putting the font awesome icon inside the button and make sure that no CSS styles prevent it from showing. See below for font awesome.

The element from my first post that makes the hamburger is the i with class fa fa-bars, this is for the font-awesome library and the class calls the correct image for what you’re wanting. This would require you to enqueue the font-awesome library in your functions.php. Here is the font-awesome page for the bars: font awesome

It probably didn’t work if you just tried dropping my code in there, the jQuery with underscores is looking for button with class menu-toggle, so that when clicked it has a class added to it via jQuery which causes the menu container to “toggle” to be on. It’s been a while since I looked at it in depth, but I believe it adds a class of “toggled” and that changes the CSS for the container div to be hidden or placed way offscreen, to that of visible or having it slide into the screen. That’s all done with CSS and the jquery part will just add/remove the classes to enable this to happen.