Divi Mobile: Collapse Submenus

Last modified Sep 10, 2020
Difficulty Intermediate
Language CSS, JavaScript

Customize the mobile menu with this easy to follow Javascript and CSS snippet! Making submenus collapse keeps the long mobile menus clean and responsive 🙂 It works with the Divi menu module and standard Divi header.

 

Before:

 

After:

Alternative Method

Collapse Submenus make it easier for users to navigate your website. If you are looking for the plugin method for beginners (no coding), check out our Divi Switch Plugin. You can create collapse submenu items inside burger menu on mobile with one click of the switch. The coding method is for more advanced users.

CSS

.et_pb_menu .et_mobile_menu .menu-item-has-children > a, 
.et_pb_fullwidth_menu .et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    position: relative;
}
.et_pb_menu .et_mobile_menu .menu-item-has-children > a:after, 
.et_pb_fullwidth_menu .et_mobile_menu .menu-item-has-children > a:after,
#main-header .et_mobile_menu .menu-item-has-children > a:after {
    font-family: 'ETmodules';
    text-align: center;
    speak: none;
    font-weight: 600;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    font-size: 18px;
    content: '\4c';
    top: 11px;
    right: 13px;
 }
.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a:after,
.et_pb_fullwidth_menu .et_mobile_menu .menu-item-has-children.visible > a:after,
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
    content: '\4d';
}
.et_pb_menu .et_mobile_menu ul.sub-menu,
.et_pb_fullwidth_menu .et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu {
    display: none !important;
    visibility: hidden !important;
    transition: all 1.5s ease-in-out;
}
.et_pb_menu .et_mobile_menu .visible > ul.sub-menu, 
.et_pb_fullwidth_menu .et_mobile_menu .visible > ul.sub-menu, 
#main-header .et_mobile_menu .visible > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
}

 

JavaScript

<script>
jQuery(document).ready(function($){
function ds_setup_collapsible_submenus() {
    var $menu = $('.et_mobile_menu'),
  top_level_link = '.et_mobile_menu .menu-item-has-children > a';

  $menu.find('a').each(function() {
    $(this).off('click');

    if ( $(this).is(top_level_link) ) {
      $(this).attr('href', '#');
    }

    if ( ! $(this).siblings('.sub-menu').length ) {
      $(this).on('click', function(event) {
        $(this).parents('.mobile_nav').trigger('click');
      });
    } else {
      $(this).on('click', function(event) {
        event.preventDefault();
        $(this).parent().toggleClass('visible');
      });
    }
  });
}

$(window).load(function() {
  setTimeout(function() {
    ds_setup_collapsible_submenus();
  }, 700);
});
});

</script>

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.4.2 of the Divi Theme and Divi friendly hosting with PHP 7+.
If you think this code saved you time, we will be happy to receive a comment and would motivate us to create more! ?

Don't forget to subscribe to our youtube channel because there’s more to come!

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com modified by Divi Space, March 30, 2020. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

70 Comments

  1. Echo

    You have the best tutorial out there for folks. So glad I found you. Even Elegant Themes was awful. Yours was the best.

    I can’t believe that nobody calls for a sexy slide on toggle though. Why? Is this not accepted anymore? I can’t stand menus that have a jolt like that. Drives my brain insane.

    Reply
  2. Reni

    Hello Anna, could you pls help me out? The menu collapses just fine and could be opened. The only issue is that the ‘+’ icon is missing, so it is. not visible for a user that a menu has submenus. Thank you in advance.

    Reply
    • Anna Kurowska

      Hi Reni, Icons are visible, but there are some CSS issues on the site and only half width of menu is visible. Make sure menu module has 100% width set or less.

  3. Craig

    Hi Anna

    Thanks so much – this works perfectly on my one website but on another site (with mega-menu) it shows on mobile but it doesnt allow me to click the + button to expand all the menu items – is there a fix you could assist with here? Website is http://www.financefrank.co.za

    Reply
  4. claudia

    Hello Anna, could you please also help me with my website? doesn’t work for me!
    This is the website. I also took it off because it stopped the ability to pages!

    https://loggiadellerondini.com

    Reply
    • Anna Kurowska

      Hi Claudia, I am not able to say what can be the issue. Can you tell me where do you put the code?
      If you are looking for the plugin method with no coding, check out our Divi Switch Plugin https://divi.space/product/divi-switch/

  5. Niki

    I would love to know if this is possible to use for desktop as well. I have a client who is looking for this click effect rather than hover: https://www.javaworks.ca/

    Reply
    • Anna Kurowska

      This is possible, but unfortunately not with this snippet. I will add to our list for future snippets 🙂

  6. Barb Peterson

    Hi. This is not working for me. I have the same problems as Bryant, who said on April 3, 2020, “This did not work for me. It made it look the way it does in picture but when you try and click to open the sub menu it just closes the entire menu.”

    Any chance you can see what’s going on? I have a cutom header I made in the Theme Builder and am using Divi 4.9.0.

    Thanks for any help!

    Reply
    • Anna Kurowska

      Hi Barb, issue you are describing may be related to JavaScript not being loaded on your site. Maybe it wasn’t added correctly. Please refer to our tutorial: https://divi.space/tutorials/how-to-add-javascript-and-jquery-to-divi/ If that doesn’t work, let me know if you have any errors in the console log

  7. Brandon Grimes

    Hello!

    As Ryan said above, tried to do this after the last update but the parent item doesn’t expand. I added the css to the child’s css file and the script to the child header file.

    Can’t figure this out. Any thoughts?

    Reply
    • Anna Kurowska

      Hi Brandon, please make sure JS and CSS are loading fine on your site. That was the reason of the issue on Ryan’s site. If that doesn’t let help, send us link to your site! 🙂

  8. Mark

    Works Perfectly, my previous code I used stopped working after recent updates.
    After hours of searching this did just the job, many thanks.

    Reply
  9. Ryan

    Hi, I did write a comment earlier but I dont see it in the comments thread anymore.
    Firstly, thanks for all the free tutorials!
    For some reason, the parent menu item with the (+) icon, doesn’t collapse when you click it, so the submenu items dont get shown. All that happens is the menu closes.
    Please see if you can figure out whats wrong. I’ll be SOOO grateful.
    Thanks in advance.
    Here’s my website: https://capegen.co.za

    Reply
  10. ryan

    Hi! Thanks very much for taking the time to do this tutorial (and all the other ones you guys do).
    I am struggling a little bit. I have added the CSS and Jquery in the correct places but for some reason, when I click on the parent menu item (+) icon, it doesn’t collapse to show the submenu items.
    I’ll be very happy if you could help me find a solution 🙂
    https://capegen.co.za/

    Reply
  11. Chetan

    Where to add this snippet code?

    Reply
  12. Marlene

    Hi,

    It works great thank you. It is possible to add something to have a first level clickable? I have a link page on the first level “travel” here: https://carolinealamy.com/

    Reply
  13. Taulant

    It works good, but there is a but. I use menu module in the theme builder that is sticky on mobile on the homepage. I have anchor links in the menu, when anchor links are clicked the page scrolls down to the correct section, but the menu does not close automatically. If I then click on the hamburger menu to close it, the page scrolls up again. This behavior is when your script is active only.

    Reply
    • Anna Kurowska

      Hi Taulant, can you send a link to the page with this issue?

  14. CJ

    Works beautifully! Thank you!

    Reply
  15. Denis

    Thanks, the code works great!!
    Divi version: 4.6.5

    Reply
  16. Spark

    Thank you so much it worked like charm! God bless you

    Reply
    • Joshua

      Cheers! Enjoy.

  17. Andy Taylor

    Is is possible to have the top level items still link through to their relevant pages when using the mobile menu collapse? Without this, it’s a bit useless for my needs.

    Please advise, thanks
    Andy 🙂

    Reply
  18. Amy

    Worked like a dream, thank you. I have been trying to find a solution for hours,

    Reply
  19. Sergio

    Hi Anna,

    This solution works very well for the mobile menu. However could you guide me how to achieve the same effect with a custom vertical desktop?

    Thanks!

    Reply
    • Anna Kurowska

      Hello, by default vertical navigation on the desktop has already dropdown effect, collapsing items from this snippet wouldn’t work well. Unless you want to get rid of the default effect?

  20. Niso

    plugged it in it today 8-22-2020 and works great Thanks

    Reply
  21. Corine

    Hey there! This worked exactly like I was looking, but it seems it’s making the parent items have bold text in the mobile menu. I changed the font-weight on line 10 to ‘normal’ and to ‘400’, both to no avail. Any recommendations? Thanks!!

    Reply
    • Anna Kurowska

      Do you mind sharing a link? 🙂

  22. Mehedi Hasan

    Please give me a modified code for full-width menu. It doesn’t work with the full-width menu.

    Reply
    • Anna Kurowska

      Thanks for letting us know 👍 We will test it and make some changes or we will write a new snippet! 👊

    • Jarod Thornton

      Update your code where it says “.et_pb_menu” with “.et_pb_fullwidth_menu” to make this work on the full-width menu 😉

    • Anna Kurowska

      Mehedi, I have updated the code. Let us know if it works now 🙂

  23. Sam

    Code works on Version: 4.5.6 with menu built with Divi theme builder – great thanks

    Reply
    • Anna Kurowska

      Great Sam! 🙂

  24. Andy Taylor

    Should this work with the Theme Builder Full Width menu?

    I’m working on a new clients site at the moment and I’ve tried using the Code (in Custom CSS and Integrations for the Code which I presume is right?) and I’ve also tried using the Divi Switch toggle method too just in case I was missing something, and I don’t get collapsing menus.

    Any help would be most welcome.
    Thanks 🙂

    Reply
  25. Alexander

    The code worked just fine for me. I’m using Divi 4.4.9 at this moment. Thank you very much! And mainly, thanks for keeping the code updated!! This is awesome. Cheers!!!

    Reply
  26. Bambi

    Thanks for this code, it works perfectly. Is there a way to make the top parents level clickable? I liked you on FB and looked there for the snippet you made for another user, but I didn’t find it. Thank you for your help.

    Reply
  27. Matthias Hänsch

    Hello,
    I use divi 4.4.7 and the code providet from this page but the menu is not showing the collapsing + on mobile. the rest is working.
    Does someone has an idea?

    Reply
    • Anna Kurowska

      Hi Matthias, is your menu multilevel (does it include submenu items)?

    • Matthias Hänsch

      Hello Anna,
      yes it does but somehome the whole theme is messed up. I have to reinstall everything first.
      will come back after that

    • Matthias Hänsch

      I rebuild it with new website and now it is working.

  28. Alan Rogers

    Just added this to a site of mine and works great thank you. What css could I add to increase the weight & color of the opening ‘+’ please?

    Reply
    • Anna Kurowska

      Happy to hear that! To change the icon size, change the font-size in the Code Snippet.

      CSS, line 15.

      font-size: 18px;

    • Alan Rogers

      Thanks for your swift reply Anna 🙂

      I changed the font size and color but couldn’t work out how to change the font weight to Bold?

      I changed font-weight on line 10 from 600 to 800 and even added !important but it hasn’t affected it? Any ideas please?

    • Anna Kurowska

      If you want to change the icon font-weight – it’s not possible in this case 🙂 Simply, ETmodules font from Elegant Themes comes with only one style, it doesn’t support font-weight. Please read more here: https://www.elegantthemes.com/blog/resources/elegant-icon-font

    • Alan Rogers

      No worries, thanks Anna.

      BTW icons 43 & 44 work well for the menu too 🙂

  29. seun

    Thanks for this code, it works perfectly. But is there a way to make the top parents level clickable?

    Reply
  30. Jim Brett

    Works well with Theme Builder > Global/Custom Header. Using 4.4.2; Flywheel’s Local PHP 7.3.5.

    The Headers do not work to my satisfaction, however – that’s a completely separate issue.

    Reply
  31. Kerwin

    How can this be modified for the Nav Menu Widget?

    Reply
    • Anna Kurowska

      You would need to use different classes. We can create a new snippet for this 🙂 Make sure you like us on Facebook so you won’t miss it!

  32. Edward

    Works perfectly! Thank you!

    Reply
  33. Bryant

    This did not work for me. It made it look the way it does in picture but when you try and click to open the sub menu it just closes the entire menu.

    Reply
    • Anna Kurowska

      Hi Bryant, send link to your site, we’ll take a look 🙂

    • Anna Kurowska

      Bryant, I updated the code, everything should be working now 🙂

    • Bryant

      That fixed it! Thank you!

Submit a Comment

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

Receive notifications about our new blog posts.