I answered earlier but the link I provided doesn’t exist anymore. So, I’ll post the code here in hopes that it is what you’re looking for.
In your functions.php, add this snippet to create the markup:
/* Mobile Menu
----------------------------------------------------------------------------------------*/
add_action( 'genesis_site_description', 'ls_mobile_menu_toggle', 5 );
function ls_mobile_menu_toggle() {
echo '<div class="menu-toggle">';
echo '<li></li><li></li><li></li>';
echo '</div>';
}
In your JS file, put this snippet in for the open/close functionality:
// Show/hide the main navigation
$('.menu-toggle').click(function() {
$(this).toggleClass('open');
$('.header-widget-area').toggleClass('expanded');
});
And finally, your styles:
For Desktop:
.menu-toggle {
display: none;
visibility: hidden;
}
For a media query of your choice:
.menu-toggle {
background: #000;
color: #FFF;
cursor: pointer;
display: block;
float: none;
height: 40px;
margin: 3rem auto 1rem;
overflow: hidden;
padding: 4px 10px;
text-align: center;
visibility: visible;
width: 46px;
}
.menu-toggle li {
background: #FFF;
display: block;
height: 4px;
margin: 5px auto;
}
.menu-toggle a:hover,
.menu-toggle a:active {
text-decoration: none;
}
.header-widget-area {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.header-widget-area.expanded {
max-height: 100px;
}
You might have to change the selectors within the media query, but shouldn’t have to. Style as you wish.
You might also have to give your header area:
position: relative;