In this article, we are going to learn how to change the Divi expanded mobile menu list to a beautiful collapse list. We can do this by adding some jQuery and CSS code. This will not only collapse the mobile Divi menu submenu but also will add some nice toggles that can be used to indicate to the user that there are more items to show and where to click.
Add some jQuery code to collapse the Divi mobile menu submenus
Go to WordPress admin dashboard Divi → Theme Options → Integrations tab in the Add code to the<head> of your blog area
<script>
window.onload = () => {
// mobile menu
$('.mobile_nav .menu-item-has-children > a').after('<span class="menu-closed"></span>');
$('.mobile_nav .menu-item-has-children > a').each(function() {
$(this).next().next('.sub-menu').toggleClass('hide',1000);
});
$('.mobile_nav .menu-item-has-children > a + span').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('menu-open');
$(this).next('.sub-menu').toggleClass('hide',1000);
});
}
</script>
Add some CSS to collapse and expands the Divi mobile menu submenus
Go to WordPress admin dashboard Divi → Theme Options → Custom CSS code box
/* hides the sub menu items on mobile */
#page-container .mobile_nav li ul.hide {
display: none !important;
}
/* adjusts the positioning and the background transparency of the parent menu item on mobile */
#page-container .mobile_nav .menu-item-has-children {
position: relative;
}
#page-container .mobile_nav .menu-item-has-children > a {
background: transparent;
}
/* This styles the icon and moves it to the right */
#page-container .mobile_nav .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;
}
/* Here you can swap out the actual icons */
#page-container span.menu-closed:before {
content: "\33";
display: block;
color: #000;
font-size: 16px;
font-family: ETmodules;
}
#page-container span.menu-closed.menu-open:before {
content: "\32";
}
Feel free to customize anything you want like colors, sizes and if you have any issue and questions feel free to ask me in the comment blew
If you want to work on your project with Divi theme, You can me find me here