A Beautiful Way To Collapse And Style The Divi Mobile Menu
One of the most common requests from our popular Divi Mobile Menu Styling Tutorial is the ability to collapse the submenu items. So today I am showing you what I believe is the best and easiest way to do this. I’ll also add some great looking toggle icons and show you how to style those as well. This tutorial is best used along with some of our other Divi Menu Tutorials to get a well rounded beautiful Divi mobile menu.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Responsive Helper!
Why work so hard? You can do this easily with a setting in our Divi Responsive Helper plugin!
1. Add Some jQuery To Collapse The Divi Mobile Menu Submenus
The idea here is to change the Divi mobile menu from a boring, expanded list to a beautiful compact 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. This tutorial comes in two parts, one for each type of code. Both of them work together and both are needed to make it work.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<script >
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>FYI: If you want to use the parent menu item as a toggle to open and close the submenu, please also use the optional code listed at the bottom of this tutorial.
2. Add Some CSS To Collapse The Divi Mobile Menu Submenus
The next step is to add the corresponding CSS code. This code works alongside the jQuery, and together they create the Divi mobile menu collapsed effect.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*change hamburger icon to x when mobile menu is open*/
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: '\4d';
}
/*adjust the new toggle element which is added via jQuery*/
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;
border: none;
position: absolute;
right: 0px;
top: 0px;
z-index: 999;
background-color: transparent;
}
/*some code to keep everyting positioned properly*/
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;
}
/*remove default background color from menu items that have children*/
.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 submenu by default*/
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 submenu when toggled open*/
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;
}
/*adjust the toggle icon position and transparency*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
text-align: center;
opacity: 1;
}
/*submenu toggle icon when closed*/
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";
content: '\33';
color: #00d263;
background: #f0f3f6;
border-radius: 50%;
padding: 3px;
}
/*submenu toggle icon when open*/
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 {
content: '\32';
}
/*add point on top of the menu submenu dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
position: absolute;
right: 5%;
margin-left: -20px;
top: -14px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
}
/*adjust the position of the hamburger menu*/
.mobile_menu_bar {
position: relative;
display: block;
bottom: 10px;
line-height: 0;
}
/*force the background color and add a rounded border*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
background-color: #ffffff!important;
border-radius: 10px;
}As you can see, each of the snippets are labeled. This does a good job of explaining what each one does. As always, feel free to customize anything like colors and sizes.
Option: Use Parent Menu Item As Toggle For Submenu
This seems to be a big question in the comment section, so I am adding the answer here. If you want to essentially remove the parent menu item link and use it as the same toggle mechanism as the dropdown icon. Instead of linking to that page, it will be used only as placeholder text and a toggle.
<script>
jQuery(document).ready(function(){
jQuery(".et_mobile_menu .menu-item-has-children a").each(function(){
jQuery(this).click(function(event){
event.preventDefault();
jQuery(".et_mobile_menu").toggleClass("pa-block");
jQuery(this).siblings("ul").toggleClass("pa-submenu");
})
})
})
</script>.et_mobile_menu .menu-item-has-children .sub-menu{
display: none !important;
}
.pa-block{
display: block !important;
height: fit-content !important;
padding-top: 0 !important;
margin-top: 0 !important;
padding: 5% !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.et_mobile_menu .menu-item-has-children .pa-submenu{
display: block !important;
}
.opened .et_mobile_menu{
height: fit-content !important;
padding: 5% !important;
}
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle{
text-align: right;
width: 100%;
}Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
Related Tutorials To Help With The Divi Mobile Menu
In our video and tutorial, we are using some code to help the mobile menu look better. This all comes from our Divi Menu tutorial series! I recommend checking out those other tutorials for lots of helpful and fun stuff!
The code worked great to stack the mobile sub menu, but it seems to have had an effect on the icon I had added to the menu for an instagram link, following another tutorial of yours: https://www.peeayecreative.com/how-to-add-icons-to-the-divi-menu/. The instagram icon is now displaying as four other icons instead of the single instagram icon. Any ideas what part of the code I could adjust to resolve this? Thanks!
Hi Mark!
Can you please share the URL of the page to understand the issue better?
Hi there — this is a question for the collapsing menu that’s ALSO turned on by the Divi Responsive Helper (which I’m using). The toggles function properly, but when I hover over the toggles, the accompanying link color reverts to the desktop text color, and not the color of the text in the actual mobile menu. In this case, I need the text to be/stay white (the dropdown mobile menu has a dark background color) and it reverts back to the darker color of the text in the desktop menu. Any suggestions? I can send you a link to the staging site I’m working on — just let me know an email address or alternative to that (I can’t post on a public forum.)
Thanks!
Hi Tim!
You can add the staging site link in the comment. We’ll keep the comment private and won’t display it publically.
Hi Simone!
I can see the following script is also added which is not from our guide and causing the conflict with our codes. Please remove it and see if it helps.
setTimeout(function(){
jQuery(document).ready(function(){
jQuery(‘li.menu-item-has-children’).click(function(){
if(jQuery(‘li.menu-item-has-children’).hasClass(‘dt-open’)){
jQuery(‘li.menu-item-has-children’).removeClass(‘dt-open’);
jQuery(‘li.menu-item-has-children .sub-menu’).removeClass(‘visible’);
jQuery(this).addClass(‘dt-open’);
jQuery(this).find(‘.sub-menu’).addClass(‘visible’);
}
});
});
},500);
Hi,
I’m using this in combination with your tutorial: https://www.peeayecreative.com/how-to-open-a-divi-menu-submenu-by-clicking-instead-of-just-hovering/
But now the sub menu isn’t opening?
You can view it at https://ijssel.ecdjdemo.nl password is zuiver
Hi Ernst!
I have checked the page and the desktop sub-menu are displaying fine on click on parent menu items. If the issue persists on your end, please clear the browser cache.
Hi there,
Amazing site with a lot of very helpful code. Regarding this sub menu code, I can’t seem to find the CSS that would allow me to increase the size of the toggle.
Thanks for any help you can provide.
Cheers,
Wayne
Hi Wayne!
It seems you’re referring to the toggle icon font size. Please try the following code:
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 {
font-size: 30px;
}
Let me know how it goes!
Hi Nelson, I’ve used this on several sites. Super easy to implement. Love it.
On the site I’m moving over to Divi today, the dropdown menu’s parent item is not a link but. In the menu I have the link set as #.
The site is https://awemoneyandme.com/.
The dev site is https://tscpreview.net/.
This works great on the desktop. On mobile, if the parent item is clicked the child menu items stay closed, the page reloads.
For example:
Workshops (this has no page but in the menu has a # for the link)
Money and Me
Lifestages
Any suggestions on how to handle the mobile menu so that when Workshops is clicked it opens the menu instead of reloading the page?
Thanks!
Operator issue…of course your script works. sorry to have bothered you about this.
I am glad that the issue is resolved now. 🙂
The URLs that you have mentioned have limited access so I couldn’t see the content inside. Could you please fix this issue so that I could investigate the problem further?
The dev site has been moved to live at https://awemoneyandme.com/. I deactivated Wordfence so you should be able to see the site now. I really appreciate your feedback!
Seems like the indetation/spacing on the submenu items is not working showing on my site: https://www.o21.nu/
Also the hamburger icon seems higher than before, not aligning with the search icon on iPad.
Any idea why? Got a fix?
I think you have some other CSS on your site, for example I see a margin of 10px that is causing that
.mobile_menu_bar {
position: relative;
display: block;
bottom: 10px;
line-height: 0;
}
and your submenu items have the same padding
.et_mobile_menu li a {
border-bottom: 1px solid rgba(0,0,0,.03);
color: #666;
padding: 10px 5%;
display: block;
}
so you could change that if you want by targeting them with .et_mobile_menu li ul li a
Thanks, it was actually a CSS code from you; changing the layout of the submenu, just changed it to only target desktop 😉