Multi-Level Mobile Menu

If you have a multi-level menu on desktop, you can use a hover state to expand the submenu. But touch devices like tablets and phones don’t have a hover state – they only have a click.

The code below converts a standard menu (unordered list) to a multi-level mobile menu. You can see it in use here. You’ll most likely need to tweak the CSS and Javascript selectors to your specific needs, especially if you have a desktop menu already styled.

<?php
/**
* Mobile Menu
*
*/
function be_mobile_menu() {
echo '<div class="mobile-menu mobile-show"><i class="fa fa-bars"></i><i class="fa fa-close hidden"></i></div>';
}
add_action( 'genesis_header', 'be_mobile_menu', 12 );
view raw functions.php hosted with ❤ by GitHub
// Mobile Menu
// -- Mobile Menu Open
$('.mobile-menu .fa-bars, .mobile-menu .fa-close').click(function(e){
$('.site-header').toggleClass('menu-active');
$('.mobile-menu .fa-bars, .mobile-menu .fa-close').toggleClass('hidden');
$('.nav-header').slideToggle();
e.preventDefault();
})
// -- Mobile Submenu Open
$('.site-header .nav-header .menu-item-has-children > a').click(function(e){
$(this).siblings().addClass('active');
$('.site-header .nav-header').animate({
left: '-100%',
}, 500, function(){});
e.preventDefault();
});
// -- Mobile Submenu Close
$('.site-header .nav-header .sub-menu').prepend( '<li class="menu-item back"><a href="#">Back</a></li>' );
$('.site-header .nav-header .sub-menu .back > a').click(function(e){
$('.site-header .nav-header').animate({
left: '0',
}, 500, function(){
$('.site-header .nav-header .sub-menu.active').removeClass('active');
});
e.preventDefault();
});
view raw global.js hosted with ❤ by GitHub
@media only screen and (max-width: 767px) {
/* Mobile Menu */
.site-header .wrap {
position: relative;
padding: 0;
}
.site-header .mobile-menu {
position: absolute;
top: 7px;
right: 20px;
font-size: 30px;
line-height: 1;
}
.site-header .mobile-menu i {
cursor: pointer;
}
.site-header .mobile-menu i:hover {
color: #1894a7;
}
.site-header .mobile-menu .hidden {
display: none;
}
.site-header .nav-header {
background: #fff;
position: absolute;
z-index: 10;
width: 100%;
display: none;
}
.site-header .nav-header .genesis-nav-menu li {
display: block;
font-size: 24px;
}
.genesis-nav-menu .signup, .genesis-nav-menu .login {
margin: 10px auto;
max-width: 300px;
}
.genesis-nav-menu .menu-item-has-children > a:after {
content: '';
display: inline-block;
margin-left: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 6px;
border-color: transparent transparent transparent #1894a7;
}
.genesis-nav-menu .menu-item,
.genesis-nav-menu .menu-item:hover {
position: static;
}
.genesis-nav-menu .sub-menu {
background: #fff;
top: 0;
position: absolute;
left: auto;
opacity: 1;
width: 100%;
z-index: 9;
display: none;
}
.genesis-nav-menu .sub-menu a {
background: #fff;
color: #2d2d2d;
width: 100%;
}
.genesis-nav-menu .sub-menu li:hover > a {
background: #fff;
color: #1894a7;
}
.genesis-nav-menu .sub-menu.active {
display: block;
right: -100%;
}
.genesis-nav-menu .sub-menu .back > a:before {
content: '';
display: inline-block;
margin-right: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 6px 0;
border-color: transparent #1894a7 transparent transparent;
}
}
view raw style.css hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk