In this post, we are going to see how to create a collapsing mobile menu in Divi Theme.
What is the case?
Most of the time when we are creating our website we make a lot of content – pages, posts, and shop pages if we are making an online store.
But when it is time to combine all of them to our menu sometimes we realize that we have a lot of subpages.
On desktop devices, our submenu items look good, but when we switch to mobile the real problem reveals. Our menu is looking too long, not user-friendly, and somehow broken. If we are managing a big website with a lot of pages our users can easily leave.
Collapsed mobile menu
How to solve this problem?
It may seem very difficult and annoying, but solving this issue is quite easy. You need to follow these two simple steps and your mobile menu will collapse its submenu items and your menu will look absolutely professional in no time.
Step 1: Adding the jQuery code
Add the following jQuery code to you child theme or in Divi > Theme Options > Intergration > Add code to the < head > of your blog
<script type="rocketlazyloadscript">window.addEventListener('DOMContentLoaded', function() {
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-icon"></a>');
$('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon, ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon').click(function(event) {
event.preventDefault();
$(this).parent('li').toggleClass('mobile-toggle-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-icon').on('mouseover', function() {
$(this).parent().addClass('active-toggle');
}).on('mouseout', function() {
$(this).parent().removeClass('active-toggle');
})
});
});
});</script>
Step 2: Adding the CSS code
Go to Divi > Theme Options > CSS and add the following CSS code:
/* #### Collaping Mobile Menu #### */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
color: #ff6f61; /* Icon color */
background: #f1f1f1; /* Icon background color */
top: 10px;
position: relative;
font-family: "ETModules";
content: '\33';
border-radius: 50%;
padding: 3px;
}
ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after {
content: '\32';
}
.et_mobile_menu .menu-item-has-children>a {
font-weight: 600 !important;
}
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {
width: 44px;
height: 100%;
padding: 0px !important;
max-height: 44px;
border: none;
position: absolute;
right: 0px;
top: 0px;
z-index: 999;
background-color: transparent;
}
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;
}
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;
}
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;
}
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon {
text-align: center;
opacity: 1;
}
Change the colors of the icon
At the beginning of the CSS code you will see this:
color: #ff6f61; /* Icon color */
background: #f1f1f1; /* Icon background color */
Change the color as your needs and you are good to go! Of course, don’t forget to save all the changes throughout the process otherwise the code will not work!
1,783 total views, 1 views today
