Divi Mobile: Collapse Submenus

Last modified Apr 18, 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.

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.

 

CSS

.et_pb_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, #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, #main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
    content: '\4d';
}

.et_pb_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, #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>

 

Your Comments

26 Comments

  1. 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
  2. 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
  3. 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
  4. 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.

  5. 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 🙂

  6. seun

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

    Reply
    • Anna Kurowska

      We can create a new snippet for this 🙂 Make sure you like us on Facebook so you won’t miss it!

  7. 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
  8. 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!

  9. Edward

    Works perfectly! Thank you!

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

Before You Start

Build a Child Theme

Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!

Generate Child Theme

How to Add Java Script and jQuery to Divi

There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.

Read More

How to Add CSS to Divi

Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.

Read More