How To Collapse Divi Mobile Menu Submenus Tutorial by Pee Aye Creative

How To Collapse Divi Mobile Menu Submenus

In this tutorial I will show you the best and easiest way to collapse the Divi mobile menu submenus and add toggle icons that look great!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

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

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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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.

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”);
})
})
})
.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;
}

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!

70

Last updated Nov 18, 2021 @ 4:11 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

OUR ONCE A YEAR SALE IS HAPPENING NOW!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

123 Comments

  1. Achmed

    Hi Nelson, thank you for the snippet!

    I have a small problem, i see 2 arrows instead of one. how is this possible ?

    Thanks!

    Reply
  2. Santiago Demierre

    Hello friend, I have a lot of tutorials.
    I have a large menu on my website and when I want to see the names of the menu that are below, I can’t keep going down. Do you know how to solve that? Thank you very much

    Reply
      • Santiago Demierre

        http://cirfaa.org.ar/

        When I scroll the menu and the menu is longer than the screen I can’t keep going down and see the menu that follows. It is difficult to explain, but if you open this site with your cell phone and open all the + you will see that once the menu occupies more space than the size of the screen you cannot continue to see the ones below.
        Thanks for answering!!

  3. Benny

    Great Tutorial… you’re the first one with this kind of tutorial where the collapsible mobile menu is working too if a mega menu is in use! Well done Nelson… really well done. Thanks for this

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Nice! I looked at all of them before posting and kind of took the best of all of them and made this, so glad to hear it is working for mega menus too!

      Reply
  4. Robertina Varga

    i sort of works but it has so many problems with it, i will just delete it. thanks for tying tough 😉

    Reply
  5. Pär

    Hi Nelson,
    thank you for a great post!
    I also have the problem with 2 arrows instead of one. Do you have a solution to the problem?
    Thank you!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Pär,
      I answered this in the other comment, it sounds like Divi is just stripping out the forward slash \ in the code before the icon number. So just make sure when you paste the code, it remains there or add it back.

      Reply
      • Pär

        Thank you for your reply! I am sorry for being stupid, but I cannot find forward slash \ in the above code either? So I do not really know where to start?

      • Mario Brumen

        Add forward slash before the number: Example: content: ‘\33’;

      • Ernesto

        Hello Par, you need to update this line

        /*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';
        }
        
  6. Robin Jones

    Hi Nelson,
    Thank you very much for this. With the forward slash correction, works a treat. However, I note that the dropdowns only show when you click the actual arrows. Clicking the section title just closes down the menu. Setting ‘Disable top tier dropdown menu links’ on theme options should stop that being a link, I thought. I checked your own site and works the same. Click Store and the page just reloads. You have to click the actual arrow to get the dropdown. Any ideas?Salut, Robin

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Robin,
      That works as expected though. In other words, nothing is wrong with it, but if you want, you can certainly experiment changing it. I want people to be able to click to those pages, but if those parent links are not links, like in the menu, then just don’t set the links…set a # and then when it is added, remove it, and it won’t click.

      Reply
      • Robin Jones

        Nelson, logical thinking, thanks.

      • Francisco

        Hi Nelson, Your site is fantastic, thank you very much.
        One question, can you make it so that I can click on the submenu text and it also opens and closes, without having to necessarily click right on the icon?
        Even if the text is not a link it always acts closing the whole menu instead of opening or closing the submenu toggle. Can you think of any ideas to modify?
        I’ve implemented it on https://franciscojoss5.sg-host.com/ (still under construction).
        THANK YOU!!!

  7. Nicolas Leoni

    Fantastic! this code works perfectly in my website, thank you very much!

    Reply
  8. Phil Simon

    Great tutorial, but I’m having a hard time getting it to work. Right now, it’s on my staging site. I’m happy to give you the link. Maybe, though, you know what’s up by the video/link/ Thanks!

    Reply
  9. Christian Gabriel Rosales Nunez

    I have only been using DIVI for a few months and your posts have helped me a lot before I made the decision to buy some plugins. While it is true that many are necessary, savings on simple things are always welcome. Best regards from Chile.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Christian,
      Nice to meet you, I’m so glad my posts have helped! Yes, there are times for code, and times for plugins. Thankfully we all have options! 🙂

      Reply
  10. ECDJ

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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

      Reply
      • ECDJ

        Thanks, it was actually a CSS code from you; changing the layout of the submenu, just changed it to only target desktop 😉

  11. Adan

    Hi, dear Thanks for your helpful content.
    But I am facing some problems and don’t know how to solve that. Can you please help me in solving that? As https://codefossils.com/ this is my site. I use your CSS code that helps me in removing the submenu in mobile view but whenever I tried to add your javascript code to my site. I am unable to add that you can see that in the attached image. the circle rotates round and round but nothing happens I am waiting for more than 2 to 3 hours but the behaviour remains the same. still unable to add that.
    I will really appreciate that if you help me in solving my problem.

    eagerly waiting. 🙂

    Reply
    • Hemant Gaba

      This issue is not because of the jQuery Code and there are many reasons for this to happen. Firstly, this can be a plugin conflict so please try to disable all the plugins and then check if the problem still persists or not. If the issue is still there then it could be happening because the server is blocking the code thinking that it is a virus. So to tackle this you need to contact your server host and ask him to disable the mod securities.

      Reply
  12. Daphne Talbot

    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!

    Reply
    • Hemant Gaba

      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?

      Reply
      • Daphne Talbot

        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!

    • Daphne Talbot

      Operator issue…of course your script works. sorry to have bothered you about this.

      Reply
      • Hemant Gaba

        I am glad that the issue is resolved now. 🙂

  13. ron

    Hi Nelson,

    I have an isue with the mobile toggle not showing up on all pages anymore except one! And that (LearnDash) page is being excluded from caching. ( https://bijbelstand.nl/courses/online-training-bijbelstand/ )

    What is causing that issue? Should I excluded some .js and if yes, wich one?

    Thanks, Ron

    Reply
    • Hemant Gaba

      The toggle is happening perfectly on the website but the problem is that the cross icon is not showing up when we open the menu. So to show the cross icon when the menu is open, please place the code given below in the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel:

      .et-db #et-boc .et-l .opened .mobile_menu_bar:before{
      content: "\4d" !important;
      }

      Please place this code and let us know that how it goes. 🙂

      About the learndash issue, could you please explain that in the little for me to more detailinvestigate further as I am not able to see any error on the URL that you have shared?

      Reply
      • Ron Linders

        Hi Nelson, thanks for the reply. It was a script error hat causes there problem.
        Solved now!

      • Hemant Gaba

        I am glad that the issue is resolved now. 🙂

  14. Diego Matter

    Hi Nelson,

    finally a solution that works. Even ET’s blog post did not work for me. Thank you so much.

    I just had to add this to make the menu wider:
    .et_mobile_menu {
    margin-top: 20px;
    width: 230%;
    margin-left: -65%;
    }

    Reply
  15. Laura

    Hi,

    Thanks so much for this amazing tutorial. Finally, a way to vastly improve Divi’s mobile menu without the bloat of adding another plugin. But I’m running to an issue where when I click (on my laptop with Chrome/Edge dev tools open) or (tap on my iPhone 8 with the latest version of Safari) on of the arrows to unfold the menu, the second and third level menu items don’t appear. Instead, I’m taken to the parent page. Any idea what might be causing this? I deactivated all plugins with no change. When I look in dev tool’s console, I see the error shown in the attached screenshot. I’m thinking this may be the cause, but am not sure how to go about resolving it. So, any insight you could offer is greatly appreciated!

    PS. Since this is a staging site, if you need credentials to take a closer look, please let me know. Thanks again!

    Reply
    • Hemant Gaba

      I am not able to see any screenshot with the comment. Could you please provide the URL of the page for me to investigate further?

      Reply
  16. Luca

    Hello Nelson, your tutorials are as always efficient and detailed and I thank you: But this time I am writing to ask you if they can create conflicts with previous codes, let me explain:
    I used your tips and codes to implement the hamburger function with the x and the word “menu” on my site, they work perfectly. Now I have entered the codes to display the word “New” in the menu and in the submenu always following your suggestions. I noticed that the menu in the tablet and smartphone version appears extended. So I followed your suggestions in this tutorial to compress it, and put the codes where you indicated, but …
    It happens that the menu appears compressed but the arrow to open them does not appear.
    Could you help me?

    Reply
    • Hemant Gaba

      We are glad that our content helps you with your website. Coming onto the issue, for our better clarity could you please share the URL of the website for us to investigate further?

      Reply
  17. Lydia

    Hi Nelson,
    I entered the CSS and it worked but the arrows in the menu didn’t appear. Instead, I see light grey slivers you can barely see. How do I edit the icons (arrows/grey slivers) in the menu if the arrows didn’t show up or if they aren’t arrows after entering the code?
    Great tutorial by the way and many thanks!

    Reply
      • Lydia

        sorry I’m new at web designing. Basically I followed your video and did what you said but the end result was not arrows (you have green arrows in yours) in the mobile menu for the hidden submenu dropdowns. The code worked in hiding the submenus in the mobile dropdown menu but the icon for the drop down was not an arrow or me. I’m wondering why the CSS code didn’t work and what part of the CSS specifically creates the arrows? Hope this makes sense: thanks for the quick reply

      • Hemant Gaba

        The code snippet given above is very neatly labeled. When you will see the labels, you will find two labels which say /*Submenu toggle icon when closed */ and /*Submenu toggle icon when open*/ under that label, the content \33 and \32 are the toggle icons. If the code is not working for you then it might be possible that you are having some console errors so could you please share the URL where you were trying the code so that we can investigate further?

      • Lydia

        This is a response to Hemant Gaba: Thank you so much for explaining what it should read for the toggle icons. It’s strange but when I copied and pasted the code, the content \33 and \32 for the toggle icons was missing. I added those into my code and now have arrows in my dropdown menus! Thank you thank you thank you!

      • Hemant Gaba

        We are really glad that the issue is resolved now. 🙂

  18. Fredrik

    Thank you for all the great tutorials!

    I was wondering if there is a way to click on the name of the menu (instead of clicking on the arrows) to get the menu to drop down. Let say, in your case, you click on “Menu Item” to show all your submenu items.

    Hopefully, you get what I mean 🙂

    /Fredrik

    Reply
    • Hemant Gaba

      I am assuming that you are using a Theme Builder header and you want to show or hide the submenu by clicking on the menu item name. To do that, please paste the jQuery code given below in the Divi > Theme Options > Integrations > Head Panel and place the CSS in Divi > Theme Options > Custom CSS Panel:

      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”);
      })
      })
      })


      .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;
      }

      This code will give you the desired results and after that, you can style the menu as per your liking.

      Let us know if that helps. 🙂

      Reply
  19. Patrick

    Hi Nelson,

    First of all thank you for all the work you put in all these tutorials.
    I’ve just many of them and always with succes.

    Unfortunately i’m having the same problem as Lydia with this tutorial.,
    Even when i add the \33 and \32 nothing is happening. There is no hidden submenus and now arrow or another icon.

    Reply
    • Hemant Gaba

      Could you please share the URL of the page for us to investigate further?

      Reply
      • Hemant Gaba

        If I use the above jQuery and CSS code, I can properly see the icons in the mobile menu. Please make sure that you are placing the code in the right place. You need to place the jQuery code in WordPress Dashboard > Divi > Theme Options > Integrations > Head Panel and place the CSS code in WordPress Dashboard > Divi > Theme Options > Custom CSS Panel.

        Please let us know if that helps.

  20. Sarthak Dutta

    Hello Nelson,

    Thank you for this snippet it is very much helpful.

    I have a question ..like in my header I have a button but I want to place it in the mobile menu. I follow your videos I thought you could help me with this.

    Reply
    • Hemant Gaba

      For that please add one more menu item in the menu by going to the WordPress Dashboard > Appearance > Menus and after that design the Menu item to make it look like the button. You can hide that Menu Item for the desktop and tablets by using media queries.

      Reply
  21. Abu Saleh Ridoy

    Your code seems got changed last I used it, and it making a problem for css. Here is the old code
    /*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;
    font-weight: 400;
    }

    /*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: #b699c8;
    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: 0px;
    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;
    }

    Reply
    • Hemant Gaba

      I am afraid that I am not able to understand what the query actually is. Could you please elaborate on the issue that you are facing on the website and share the URL of the website as well?

      Reply
  22. Danilo

    Hi, congratulations for the always very interesting site,
    I can’t fix the open and close cross in the mobile menu, could you tell me where to go for the change, Thanks
    https://www.prolocoollolai.it/

    Reply
    • Hemant Gaba

      Hi Danilo

      I am afraid that I am not able to replicate the issue on my end as the plus and the cross icons are working absolutely fine. Could you please try clearing the cache or checking the website on a different browser or device and see if that helps?

      Please let us know how it goes. 🙂

      Reply
  23. lesterfrancisco

    Hi great example,
    Works for me but, when open in a mobile you need to push the icon for open and collapse.
    How i can make in whole item?
    Thank You!

    Reply
    • Hemant Gaba

      Hi there,
      Could you please share the URL of the page for me to investigate further?

      Reply
      • Anneke Engels

        I have the same issue, my url is https://addendum-pro.de/.
        On the mobile version of the menue, I would like to open the child links when clicking on the name of the parent (for example “Für Bewerber”). Right now, the child links only open when clicking on the arrow on the right side.

        Is there a solution? Thank you! 🙂

      • Hemant Gaba

        Hi Anneke,

        As I could see on the URL that the query you mentioned in the comment is resolved. Please let us know if you need any further assistance. 🙂

  24. Steve

    Hi, I’ve used this snippet to collapse a mobile menu on desktop created using your other tutorial code. The only issue I have on desktop is that the toggle arrows overlap the menu item name. What’s the fix for that?

    Here’s a screengrab of the issue on desktop: https://snipboard.io/QzYrp4.jpg

    Cheers

    Reply
    • Hemant Gaba

      Could you please share the URL of the page so that I could investigate which code is causing this issue?

      Reply
  25. Phil Matt

    Of all the various solutions for this Divi mobile menu problem, the one presented here is the only one that works “out of the box” in all contexts! The commenting out of the CSS is extremely helpful. Divi’s own “official” solution is to use the Theme Builder, which is not really that handy when you’re dealing with a site that is already running off a Divi child theme, using things like Global modules.

    Reply
  26. Saif

    Hi, Thanks for the tutorial it was very helpful, and I was able to solve the issue with the mobile menu not collapsing. But seems the “x” icon is not reflecting in my case, also some “P” alphabets are coming when expanding.
    Any idea what might be the issue and how it can be fixed?
    URL: http://www.stoptoexplore.com

    Reply
      • Saif

        Hi Nelson,
        Thanks for the response. The issues with “X” icon not reflecting got resolved but the “P” is still visible. I disabled Autoptimize, cleared the caches. But still see the same 🙁
        Any other suggestion ?

  27. Endrew

    Hi Nelson, great tutorial as always!

    Works great for me, but how can i put the first menu item opened?

    Reply
  28. Leha Carpenter

    Thanks for trying, but the jquery seems to be the same approach as a solution I tried on another client site probably ten years ago, and my problem with it is that when the user clicks on any parent menu item, they expect it to open that item, but instead, it causes the whole menu to fold up. I don’t want to frustrate site visitors, and this behavior is going to do that.

    I do appreciate the effort, as well as many of your other code snippets!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Not sure what you mean. If a parent menu item is an actual link, then it needs to be a clickable link…not open the submenu. Opening the submenu of a parent item needs to be done via the icon. Otherwise you lose access to that main parent page link.

      Reply
  29. diana

    Hi Nelson, I posted a comment for help yesterday, but it is not even showing for me as pending anymore. Anyway, my question was if there is a way to make a menu collaspible to look different for pages that I have a new header for using divi builder? I have the collaspe code already for the rest of the site but I want the sports pages to look different. You can see the testing version on my test site: https://diananashif.com/mca-sports-mainpage/

    The main MCA site that I will be moving these pages and new header to is: https://mannahouseacademy.com/

    Appreciate your guidiance on this…….
    All the best,
    Diana

    Reply
    • Hemant Gaba

      Hi Diana,

      The feature of showing the pending comments is removed now but we get all of your comments and we are here to help. 🙂

      Coming to the issue, I am not sure that I totally get what you are trying to say but this is what I understood:
      You have the code for the collapsable menu that is being applied to all the pages but you don’t want to apply that code to the sports page so what you can do is instead of placing the jQuery or CSS code for the header in the Integrations or Custom CSS Panel, you can go to the template where you want that code to take effect, add a code module and place the jQuery and CSS code wrapped in there respective tags in that module. This way the code will only be applicable to that very page and not the rest and this you can do with other templates as well so the page where you will not add the code will not be affected and can be designed differently.

      Let us know if that helps. 🙂

      Reply
  30. Dan Cahill

    Hi, The icon is on top of the menu element… Any help how I fix this would be much appreciated.

    Reply
    • Hemant Gaba

      Hi Dan,

      On my end, I am not able to replicate the issue that you stated in your comment on the given URL. Please provide the URL of the website where you are facing this issue.

      Reply
    • Hemant Gaba

      Hey Evan, As far as overlapping is concerned I am afraid that I am not able to replicate the issue on my end and everything looks just fine. Talking about the icon styling and shape, it is because of the CSS Snippet that is present in the guide and you can change the snippet as per your liking.

      Reply
      • Jon Crowder

        Hemant, Thanks! This code is great, but I have the same vague football shape icon too. I don’t understand where to change that in the code??? A “+” symbol would work too. Or, the arrow that’s mentioned in the blog would be fine. Help please. https://peakrhythms.com
        Thank you!

      • Jon Crowder

        Hemant,
        Never mind. I fixed it.
        Thanks!
        Jon

      • Hemant Gaba

        I am glad to hear that the issue is resolved now. 🙂

        Please let me know if you need any further assistance.

  31. Jesse

    This tutorial worked great for refining my mobile menu display. Thanks!

    Do you have any tutorials for collapsing the Divi menu submenus on a desktop?

    Reply
    • Hemant Gaba

      Hi Jesse,

      I am a little confused here as the submenu are collapsable by default on desktop view so could you please elaborate on the issue a little more?

      Reply
      • Jesse

        Hi Hemant,

        The tutorial works great for mobile screens, but when the menu is displayed on screens with larger breakpoints, it doesn’t collapse the submenu’s second and third level menu items. I was wondering if there was another tutorial on how to collapse the second and/or third level submenu items for screens with larger breakpoints. Ideally, the desktop menu’s third level submenu items would also collapse–creating a flyout or stacked list when hovered over. Right now all of the submenu items are displayed at once on the desktop.

        Thank you for your help.

      • Hemant Gaba

        Could you please share the URL of the website for me to investigate further?

  32. Christan

    Hi Nelson,

    thank you for this great tutorial!

    I just have a question to the 2nd level (when there is a 3rd level in the menu). In this case the toggle on the 2nd hierarchy is not right aligned. It is positioned directly after the menu item name.

    How can I fix it that the toggle is right aligned as in the top level/1st hierarchy of the menu?

    To clarify what I mean, please take a look in my loom video: https://www.loom.com/share/513b3b775e754f3c97838ffbc2657a21

    Best regards,
    Christian

    Reply
    • Hemant Gaba

      Hi Christan,

      I understood your problem and it would be great if you provide the URL of the website for me to investigate further.

      Reply
  33. Hilmi

    Hi Nelson,

    I admire your work, I request your help. Sory bad grammar 🙂

    I clicked it and the first menu opened with submenu . Then I clicked on a second menu. Opss, the first remained open!
    I have a very large menu content so, how to automatically close the open menu item (with submenu) when clicking on another menu item? what should i add in the code below?

    (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().slideToggle(‘reveal-items’);
    $(this).toggleClass(‘icon-switch’);
    });
    }
    $(window).load(function() {
    setTimeout(function() {
    setup_collapsible_submenus();
    }, 700);
    });
    })(jQuery);

    Reply
  34. Laszlo Bartucz

    Hi Nelson,
    Another fantastic tutorial – thank you very much.
    Could you please help me display the word ‘Menu’ next to the menu icon properly?
    The code I’m using at the moment is:
    .et_mobile_nav_menu:before {
    content:’MENU’;
    font-family:Neuton;
    font-size: 1.3em;
    color: #24839e;
    margin-right: 5px;
    }
    .

    Reply
    • Hemant Gaba

      Hi Laszlo,

      The URL the you provided already has the Menu text besides the hamburger icon so I am assuming that the query is resolved now.

      Let us know if you need any further assistance.

      Reply
  35. Thomas

    Hi, I am managing a website and tried implementing your code.

    When I use the inspector on the desktop and look at the webpage in mobile view, everything works perfectly.

    When I actually open it up on my phone, none of the arrows show up making it impossible to access any submenus. Any idea what could be going on?

    Reply
    • Hemant Gaba

      Hey Thomas,

      I tried opening the website on my phone and I am not able to replicate the issue that you are facing but if you want to move the arrows to the left a little then you can use the code given below:

      #access > .menu ul li > a:not(:only-child) span:after{
      right: 20px !important
      }

      Increase the right property value to move the icons to the left.

      Let me know how it goes. 🙂

      Reply
  36. Kristina

    Hi Nelson,
    Love your tutorials!!
    I have a question; Is there any way to make this work on desktop?

    I have a page where I would like to keep the menu showing as a regular menu (not in a hamburger menu), but I would like to have the collapsing effect.

    I have three menu levels ranked this way: Products(main menu) -> product categories(sub item) -> and lastly the product itself (sub sub item)

    Is that possible? 🙂

    Reply
    • Hemant Gaba

      Hi Kristina,

      Could you please share the URL of the website for me to investigate further?

      Reply
  37. Arindam

    Great tutorial. But in some cases the collapsable icon not looking in right way. So my suggestion is that remove the font-family: etmodules then put ‘+’ and ‘-‘ sign accordingly.

    Reply
  38. John Stavola

    The content for the toggle arrows is set to nothing in your code … Thus, showing no arrows.

    content: ”;

    When I set mine to…

    content: ‘\32’; (for when open)
    content: ‘\33’; (for when closed)

    then it it worked.

    Also for the top hamburger to show an x I had to use this:

    content: ‘\4d’;

    not

    content: ‘d’;

    Reply
      • Sarah Austin

        I noticed the same as John Nelson, in your CSS above you have content: ‘d’; for changing the hamburger icon to X, and lower down content: ‘ ‘; where an ETModule code should be (e.g. content: ‘\4c ‘;), S

      • John Stavola

        Nelson, See this screenshot of your code above… there is nothing in between the apostrophes for the content of the arrow toggles.

        https://snipboard.io/wt6SCd.jpg

  39. hadey

    Hi Nelson,

    Is this still working? It does not seem to work for me. I am using Divi ver 4.12

    Thanks

    Reply
  40. Sarah Austin

    Just a small issue Nelson, but I am finding it increasingly annoying because I can’t solve it myself – would you mind suggesting where can I add a Z-index property that will ensure the mobile menu dropdown overlays the WooCommerce image zoom icon on a product page, for example: https://hawaiian-shirt-shop.co.uk/product/san-souci-mint/ – many thanks in anticipation

    Reply
    • Hemant Gaba

      Hi Sarah,

      Go to the Divi > Theme Options > Custom CSS Panel and place the code given below:

      a.woocommerce-product-gallery__trigger {
      z-index: 1 !important;
      }

      Let me know how it goes. 🙂

      Reply
  41. Percy

    Hello, I copied and pasted the code but it doesn’t appear the point on top of the menu submenu in mobile and desktop. The submenu appear without round corner in mobile and desktop.
    My website is http://www.ayudaadomicilio.pe

    Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart