How to add a collapsible mobile menu in Divi.

Sep 28, 2021 | Divi Tips | 0 comments

A collapsible mobile menu in Divi is something you might think would be standard or at least an option, but is not. The good news is it’s easy enough to pull off.

How to add a collapsible mobile menu in Divi

In your Appearance / Menu area click the “Screen Options” button in the upper right. Make sure CSS Classes is checked.

Click the down arrow next to the menu items that have sub-menus. Add “first-level” to the CSS Classes field.

Next, add “second-level” to each sub-menu item class.

Note: This works on a second level or one sub menu deep only. Multiple sub menu items would need more coding.

TIP: The top level link sometimes does not work. I typically add the top level link as a sub-menu item but hidden on desktop (by using this method).

Save Menu.

Add this to the Divi theme options / Integration / Head area inside of a <script> tag.

[js]
// collapsible mobile menu
(function($) {       
function setup_collapsible_submenus() {     
var FirstLevel = $('.et_mobile_menu .first-level > a');
   
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');  
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});    
}
       
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
  
})(jQuery);
[/js]

Add the following CSS to the Divi Options / Custom CSS (without style tags) or Integration / Head area (use style tags).

[css]
/* collapsible mobile menu BEGIN */
.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
/* collapsible mobile menu END */
[/css]

That’s all! Please comments below.

Need help with this?
Hire me for a consultation and I'll walk you thru the process.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

5 star reviews
"WOW! Money WELL spent. Joseph was incredibly knowledgeable in helping me make some final tweeks to my Divi website. He was very caring and went above and beyond. Will 100% use him for any future Divi website needs."
Claire - CMMC

5 star reviews
"You really get what you pay for with Joe. He does more than simply build a website, he sets up websites for success. Functional, clean, professional designs and he keeps up/implements the latest plugins and technology. Thank you Joe. I will continue to refer you work."
Mark Winger

5 star reviews
"The best WordPress guy I’ve worked with on WordPress, hands-down (and I’ve worked with dozens). Remarkably good with theme customizations with a quick turn. Kept it on budget as well. A rarity with hourly contracts."
Nate Wright

5 star reviews
"Thanks for your prompt reply. You’re always so comprehensive. If we could write another review just for your communication skills, then we would."
Alex N

More Tips

Looking for some deals?

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Cloudways Hosting

WPEngine Hosting

Pressable Hosting

AccuWeb Hosting

Divi PHP Code Module

Ask a Question

"*" indicates required fields