How to Create a Divi Mobile Menu Collapse Effect

by | Jul 29, 2019 | Divi Tutorial | 123 comments

In this tutorial I’ll show you How to Create a Mobile Menu Collapse Effect in Divi. It’s a great way to customize the Divi mobile menu on your site and is VERY important for UX (user experience) when you have a lot of menu items.

There are a lot of tutorials out there on this and I’ve used several over the years but this particular method has been the best and most reliable. I’ve actually modified the code from the OG post here on the collapsing effect.

In short, we’re going to use a little CSS and jQuery to make this happen. But don’t worry, if you’re terrified of code, it’s all explained and provided below.

In short, the CSS below controls the styling of the actual mobile expand/collapse icons and the jQuery provides the actual expand/collapse function.

*** Important Update – Now 2 Options ***

The code shown in the tutorial DOES NOT work with the Divi Theme Builder as I created this before that was released. But the revised code that DOES work with the theme builder is below in option 2 🙂

Thanks to one of my developers Christian at Brightsol for helping me revamp this code.

Option 1 (WITHOUT Theme Builder):

Just add this to your theme customizer CSS area or ideally your child theme stylesheet. You can customize the color, size, etc to your liking. Again be sure to reference the ET icon guide (link below) if you want to change the icons.

/********* Mobile Menu Collapse ********/
 
/**** This hides the sub menu items on mobile ****/
 
#main-header .et_mobile_menu li ul.hide {
display: none !important;
}
 
/**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/
 
#mobile_menu .menu-item-has-children {
position: relative;
}
#mobile_menu .menu-item-has-children > a {
background: transparent;
}
 
/**** This styles the icon and moves it to the right ****/
 
#mobile_menu .menu-item-has-children > a + span {
position: absolute;
right: 0;
top: 0;
padding: 10px 20px;
font-size: 20px;
font-weight: 700;
cursor: pointer;
z-index: 3;
}
 
/**** Here you can swap out the actual icons ****/
 
span.menu-closed:before {
content: "\4c";
display: block;
color: #fff;
font-size: 16px;
font-family: ETmodules;
}
 
span.menu-closed.menu-open:before {
content: "\4d";
}

Here’s the jQuery:

Be sure to put this in the section in the integrations tab under Divi > Theme Options > Integrations.

<script type="text/javascript">
(function($) { 
    function setup_collapsible_submenus() {
        // mobile menu
        $('#mobile_menu .menu-item-has-children > a').after('<span class="menu-closed"></span>');
        $('#mobile_menu .menu-item-has-children > a').each(function() {
            $(this).next().next('.sub-menu').toggleClass('hide',1000);
        });
        $('#mobile_menu .menu-item-has-children > a + span').on('click', function(event) {
            event.preventDefault();
            $(this).toggleClass('menu-open');
            $(this).next('.sub-menu').toggleClass('hide',1000);
        });
    }
       
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
  
})(jQuery);
</script>

Option 2 (WITH Theme Builder):

Just add this to your theme customizer CSS area or ideally your child theme stylesheet. You can customize the color, size, etc to your liking. Again be sure to reference the ET icon guide (link below) if you want to change the icons.

/**** This hides the sub menu items on mobile ****/
#page-container .mobile_nav li ul.hide {
	display: none !important;
}
/**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/
#page-container .mobile_nav .menu-item-has-children {
	position: relative;
}
#page-container .mobile_nav .menu-item-has-children > a {
	background: transparent;
}
/**** This styles the icon and moves it to the right ****/
#page-container .mobile_nav .menu-item-has-children > a + span {
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px 20px;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	z-index: 3;
}
/**** Here you can swap out the actual icons ****/
#page-container span.menu-closed:before {
	content: "\4c";
	display: block;
	color: #000;
	font-size: 16px;
	font-family: ETmodules;
}
#page-container span.menu-closed.menu-open:before {
	content: "\4d";
}

Here’s the jQuery:

Be sure to put this in the section in the integrations tab under Divi > Theme Options > Integrations.

<script>
(function($) { 
    function setup_collapsible_submenus() {
        // mobile menu
        $('.mobile_nav .menu-item-has-children > a').after('<span class="menu-closed"></span>');
        $('.mobile_nav .menu-item-has-children > a').each(function() {
            $(this).next().next('.sub-menu').toggleClass('hide',1000);
        });
        $('.mobile_nav .menu-item-has-children > a + span').on('click', function(event) {
            event.preventDefault();
            $(this).toggleClass('menu-open');
            $(this).next('.sub-menu').toggleClass('hide',1000);
        });
    }
    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
})(jQuery);
</script>

Like this tutorial? You’ll love my CSS Course.

Use coupon code “CSS30” for $30 OFF at checkout!