Divi Mobile: Collapse Submenus With Clickable Parent Menu Items

Last modified Dec 4, 2020
Difficulty Intermediate
Language CSS, JavaScript

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

18 Comments

  1. Frank

    When I use the code it doenst work on some pages… The icon dissapears. This probleem only seems to apear on a Iphone. Can you please help me?

    Reply
    • Anna Kurowska

      Hi Frank, I tested it on the iPhone and it works for me. What model of the iPhone are you using and what browser ?

    • Frank

      Well, it only happens when I click on a page en then open the menu. It seems to happen to every Iphone I tried, different versions…

    • Anna Kurowska

      I am not able to replicate this issue, so it’s difficult to say so what can be the reason

      1. Is the same issue appearing on this site for you: https://tutorials.aspengrovestudio.com/ ?
      2. Can you check if there are any errors in the console log? (It may require to install app on your phone.)

    • Christian Mayer

      Hey there! I have the same issue as Frank (with my iPhone 8) – On Homepage the Menu works perfectly fine but on all other sub pages the dropdown symbols are not displayed. There’s no caching activated. I don’t seem to have the same issue on the link you provided to frank. Hope we can get this fixed! 🙂

    • Anna Kurowska

      Can you send me the link to the page that the issue occurs?

  2. Jud

    Hello,
    it works very well on Chrome but does not work in Firefox at all.
    Is there any solution for that?
    Thank you in advance!

    Reply
    • Anna Kurowska

      Hi Jud, we tested code with Firefox and everything seems to be working. Can you describe the issue or send a link..?

  3. Simon

    Hi,
    Not sure why I am having this issue. It works for the homepage and the pages with the drop-downs but it isn’t showing for the other pages. Very strange. Is there an easy solution for this issue?

    Reply
    • Anna Kurowska

      Hi Simon, This will be working only for multilevel menus, that on the desktop are being displayed as drop-downs. Cheers!

  4. Rick

    I just added your code and it’s working but not on all pages of my website… Please help?!

    Reply
    • Anna Kurowska

      Hi Rick, can you share a link to your website?

  5. Björn

    Hi all, when I click on a parent menu item, I don’t see the icons to expand the parent menu items afterwards. Do you have any idea?

    I am Using Divi 4.7.7 and WP 5.6

    Reply
  6. 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" ); 
  7. Augustin AUBERT

    Hello, does it work with theme builder menu ? thx

    Reply
    • Anna Kurowska

      Yes 🙂

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