How To Create A Collapsing Mobile Menu in Divi

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

<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-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: #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,
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;
}

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…

19 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!

    Reply
    • 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?

      Reply
  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!

    Reply
  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!

    Reply
  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

    Reply
  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.

    Reply
    • 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

      Reply

Leave a Comment

4 Shares
Share4
Pin
Tweet