If you have ever used a mobile device with a small screen to view websites, you should now be familiar with what is often referred to as the “Hamburger”. On smaller screens that just don’t have enough space to display all the menu choices, the user is presented with three lines in the upper right hand corner. TappingĀ on it should display the menu. How it does this can make a big difference on how user friendly your site is.

I have provided some code below that will assist you in cleaning up your Divi themed website mobile menu along with screen shots of a site before and after the code addition. The code should be entered in the Divi -> Theme Options -> Integration Tab -> Body section.

<style>
.et_mobile_menu .menu-item-has-children > a { background-color: transparent; }
#main-header .et_mobile_menu li ul.sub-menu.hide { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu li ul.sub-menu.visible { display: block !important; visibility: visible !important; }
.et_mobile_menu .menu-item-has-children > a:after { content: ‘+’; position: absolute; right: 20px; }
</style>
<script>
(function($) {

function setup_collapsible_submenus() {
var $menu = $(‘#mobile_menu’),
top_level_link = ‘.menu-item-has-children > a’;
$menu.find(‘a’).each(function() {
$(this).off(‘click’);

if ( $(this).is(top_level_link) ) {
$(this).attr(‘href’, ‘#’);
$(this).next(‘.sub-menu’).addClass(‘hide’);
}

if ( ! $(this).siblings(‘.sub-menu’).length ) {
$(this).on(‘click’, function(event) {
$(this).parents(‘.mobile_nav’).trigger(‘click’);
});
} else {
$(this).on(‘click’, function(event) {
event.preventDefault();
$(this).next(‘.sub-menu’).toggleClass(‘visible’);
});
}
});
}

$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>