Recently, we were working in Divi theme and we have a long menu. It looks fine on desktop but on mobile it covers up lots of space. So, the best solution was to collapse sub-menu links and show them on click.

We found couple of tutorials online but they do not provide solution to keep parent menu clickable while our requirement was to keep parent menu item clickable. So, by doing some coding we were finally able to achieve this.

Here are the steps to make divi theme mobile menu collapsible:

  • Add css code to hide sub-menu items on mobile.
  • Add span tag to parent menu item using jquery so we can show “+” icon. It will indicate that there are sub-menu items.
  • Finally, add css to show hidden sub-menu items On-click and change “+” icon to “x”.

 

Step 1:

First, you will have to add this css below, it will hide sub-menu items on mobile.
All css will go inside Divi Theme Options -> Custom Css. Alternatively, you can also add this css code into your child-theme (Appearance -> Editor).

#main-header .et_mobile_menu li ul.hide {
    display: none !important;
}

Next we need to set position relative and background transparent for parent menu item that have sub menu.

#mobile_menu .menu-item-has-children {
    position: relative;
}
#mobile_menu .menu-item-has-children > a {
    background: transparent;
}

Now, we are going to style dropdown icon and move it to the right side.

#mobile_menu .menu-item-has-children > a + span {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
}

Step 2:

Here is jquery code that will include span tag for each parent menu item that has sub-menu items.
You have to place this code into your Divi theme options -> Integrations-> Add code to the Body option, wrapped in script tag.

<script type=”text/javascript”>
(function($) {
function setup_collapsible_submenus() {
// mobile menu
$(‘#mobile_menu .menu-item-has-children > a’).after(‘<span class=”menu-closed”></span>’);
$(‘#mobile_menu .menu-item-has-children > a’).each(function() {
$(this).next().next(‘.sub-menu’).toggleClass(‘hide’,1000);
});
$(‘#mobile_menu .menu-item-has-children > a + span’).on(‘click’, function(event) {
event.preventDefault();
$(this).toggleClass(‘menu-open’);
$(this).next(‘.sub-menu’).toggleClass(‘hide’,1000);
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>
view rawmobile-menu-cs.txt hosted with ❤ by GitHub

 

Step 3:

For collapsed menu, we have used “+” icon from divi icons set.
This css code you will paste in Divi Theme Options -> Custom Css.

span.menu-closed:before {
    content: "\4c";
    display: block;
    color: inherit;
    font-size: 16px;
    font-family: ETmodules;
}

Change collapse menu icon to “x” when it is clicked and sub-menu items are visible.

span.menu-closed.menu-open:before {
    content: "\4d";
}

Thank you for reading this post. Let us know your thoughts in comments.