All Tutorials
Day 3
CSS 101
Next

Collapsible Menu

In Divi, your menus will not collapse automatically. You will have to use the code below to get your menus to be collapsible.  You will have to paste this code under “Divi Theme Options.” The CSS will go in the “General” tab under “Custom CSS.” The JavaScript will go in the “Integration” tab under “Add code to the <head> of your blog.”

Enter In 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’;
}

/* Dropdown Menu Items on One Line Desktop */
#menu-home .sub-menu li{
width:300px!important;
}
#menu-home .sub-menu{
width:300px!important;
}

Enter In <head> Under Integration

<script>jQuery(document).ready(function($) {
$(‘img[title]’).each(function() { $(this).removeAttr(‘title’); });
});</script>

<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>

Test Your Knowledge

To Do: Collapsible Menu

Do your best to recreate the table shown in the below screenshot. 

Before

After

Completed Website

As you work through the Divi training, you’ll build out the below website. Each training will add to the website. Build out the website on the pizzazzgrouptyk.com domain from the inmotion 101 training.