Update: the custom CSS Code was updated so it will work with the latest Divi version and also with all Performance Options Enabled (check the Demo URLs at the end of this article).
The following code (CSS and JS) will help you achieve a nice collapsable menu, no matter if the default Divi's Header area is being used or if Menu modules are being used in Theme Builder > Header Template.
Step 1: Add the following CSS Code to Divi ➤ Theme Options ➤ Custom CSS:
/*Proper Collapsable Mobile Menu*/
/*Style the icon's placeholder*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
width: 44px;
height: 100%;
padding: 0px !important;
max-height: 44px;
position: absolute;
right: 0px;
top: 0px;
z-index: 999;
background-color: transparent;
border-bottom: 0;
text-align: center;
}
ul.et_mobile_menu > li.menu-item-has-children,
ul.et_mobile_menu > li.page_item_has_children,
ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children {
position: relative;
}
.et_mobile_menu .menu-item-has-children > a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
}
/*Hide the Sub-menu*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
display: none !important;
visibility: hidden !important;
}
/*Show the sub-menu when the + icon is clicked*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
display: block !important;
visibility: visible !important;
}
/*Create the opening/closing icon using the Divi's Icons*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
top: 10px;
position: relative;
font-family: "ETModules";
}
/*Set the opening icon for custom Tax Pages*/
body.single-product:not(.et-tb-has-template) ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-product_cat ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-project_category ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.single-product.et-db:not(.et-tb-has-template) #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-product_cat.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-project_category.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
content: "+";
}
/*Set the opening icon for default WordPress Pages*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
content: "\4c";
}
/*Set the closing icon*/
ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.single-product:not(.et-tb-has-template) ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.single-product.et-db:not(.et-tb-has-template) #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-product_cat ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-product_cat.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-project_category ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-project_category.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after {
content: '\4d';
}
Step 2: Add the following JS code to Divi ➤ Theme Options ➤ Integration tab ➤ Add code to the < head > of your blog
### jQuery version:
<script id="dt-collapsable-menu-items">
jQuery(function ($) {
$(document).ready(function () {
$("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children").append('<a href="#" class="mobile-toggle"></a>');
$('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle').click(function (event) {
event.preventDefault();
$(this).parent('li').toggleClass('dt-open');
$(this).parent('li').find('ul.children').first().toggleClass('visible');
$(this).parent('li').find('ul.sub-menu').first().toggleClass('visible');
});
iconFINAL = 'P';
$('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL);
$('.mobile-toggle').on('mouseover', function () {
$(this).parent().addClass('is-hover');
}).on('mouseout', function () {
$(this).parent().removeClass('is-hover');
})
});
});
</script>
The result will be something similar to:
Demo Pages:
WordPress Pages
Woo Pages
Projects