[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How To Create A Collapsing Mobile Menu in Divi

Mark Hendriksen | April 27, 2021 | 24 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

In this tutorial, we are going to build a collapsing mobile menu with nested menu items. If you have many menu items in your mobile menu, this can become a long list. With a collapsing mobile menu, we can make it a lot user-friendly.

This is how the collapsing mobile menu will look. When you click on a arrow the menu will expand and the second-level menu items will be visible.

Example collapsing mobile menu

You can see a live demo here.

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

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) {
        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() {
        }).on('mouseout', function() {

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: #da181f; /* 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 .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;

How to change the colors

At the top of the CSS code you will see this:

color: #da181f; /* Icon color */
background: #f1f1f1; /* Icon background color */

Here you can change the color codes for the background and icon.

You might also like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

24 thoughts on “How To Create A Collapsing Mobile Menu in Divi”

  1. Thanks Mark – that’s got me thinking 🙂
    I have 2 menus in my header one on top of the other (One just wasn’t enough space!) However on mobile this gives me 2 hamburger menus which really doesn’t work. Could this be used with a little tweaking to combine the two menus to end up with the result you have shown here?
    Fantastic, tips and child themes!

    • Hi Andreas,

      No, I do not think that will be easy to do.

      Is the reason that you use 2 menus that you have too many menu items for the desktop? And that it looks odd on small screen sizes?

  2. Really a great tutorial! I’ve had it bookmarked since you posted it and just today started using it. Already have it set up on 5 sites! Thank you for all you do to help us!

  3. Thank you so much, my friend! The other jquery-Tuts didn’t work all along!
    You saved me some bucks for a plugin, that I wouldn’t want to spare many for.
    You, Sir, deserve my respect!

    Where can I support you?
    Greatings from Germany!

  4. omg, you just don’t know how much you saved me, been stuck for hours trying to figure out how to go about this. Thanks a million, times mark

  5. Hello there, i’ve tried your code but for some reason it doesn’t work. When i clicked on “v” button, the dropdown doesn’t show sub-page and close the menu. I added js on and css but idk why it doesn’t work. I also tried divi safe mode but nothing changed. I’m going crazy for this mobile menu.

    • Hi,

      Do you have any caching plugins installed? or are you using a CDN?

      If so clear those caches.

      Also clear the static CSS in Divi > Theme Options > Builder > Advanced

      And clear your browser cache

  6. Thank you so very much! Worked great! For some reason though, the arrow to expand a menu is red. I don’t have any red in my theme so I’m wondering how I would change the color of that arrow? Anyone know? Thanks again!

    • I got this sorted. Was an issue on my end. Thanks again for this code! Super, super helpful – and it just worked the first time I installed it!


Leave a Comment