To collapse a nested menu on the mobile menu hamburger, paste into divi theme options/integration/body:
<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 = '#mobile_menu >
.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>
