Divi Mobile: Collapse Submenus With Clickable Parent Menu Items

Last modified Sep 10, 2020
Difficulty Intermediate
Language CSS

Great website navigation is key for a simple and clean site navigation experience. A collapse submenus can be a perfectly reasonable solution if your menu includes parent items. They keep the menu organized, showing site hierarchy without removing any menu items – exactly what really matters on the smallest screens.

This is an alternative version of the Divi Mobile: Collapse Submenus Divi Snippet. Today, however, parent menu items (in the example Home, Shop, Blog) will stay clickable.

In this example, we will use the site with Divi Ecommerce child theme installed. Just paste the Javascript and CSS to your site!

Before

After

 

In action:

 

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, #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.toggle-menu, #main-header .et_mobile_menu .menu-item-has-children > a.toggle-menu {
    font-family: 'ETmodules';
    font-size: 18px;
    padding: 10px;
    z-index: 10;
    display: inline-block;
    position: absolute;
    right: 5px;
 }
.et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a.toggle-menu, #main-header .et_mobile_menu .menu-item-has-children.visible > a.toggle-menu {
 	transform: rotate(180deg);
}

.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.toggle-menu';
  $( '<a href="#" class="toggle-menu">C</a>' ).insertBefore( ".et_mobile_menu .menu-item-has-children > a" );

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

    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.5.3 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, August 4th, 2020. Licensed under the GNU General Public License, no warranty; click here for details.

 

Your Comments

5 Comments

  1. Jose Marquez

    It works great, but how can i change the arrow to a + and – signs?

    Reply
    • Anna Kurowska

      Hi Jose, we are using Elegant Themes fonts to display arrows. You can change the “arrow_triangle-down” icon to plus by changing the 6th line in the JavaScript to\\

       $( '<a href="#" class="toggle-menu" rel="nofollow ugc">L</a>' ).insertBefore( ".et_mobile_menu .menu-item-has-children > a" ); 
  2. Augustin AUBERT

    Hello, does it work with theme builder menu ? thx

    Reply
    • Anna Kurowska

      Yes 🙂

  3. bruno

    Hello,
    I use the “Divi Switch” plugin on a site because the sub menus are very long and the presentation on mobile is really much better!

    Reply

Submit a Comment

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

Receive notifications about our new blog posts.