Create Better Divi Headers

How To Collapse Divi Menu Module Submenus And Keep Parent Links Clickable On Mobile

by | Nov 3, 2019 | 102 comments

In this tutorial you will learn how to collapse Divi mobile menu submenus and keep parent links clickable.

Table of Contents

The Problem

The Divi Menu and the Fullwidth Menu modules started gaining more popularity among Divi users since the release of the Divi Theme Builder which allows creating headers using the Divi Builder.

Both of these menu modules provide quite a decent functionality for creating menus but currently are still lacking an important feature: they do not allow collapsing the mobile menu submenus.

This may be a serious UX issue especially with the complex menus having multi-level submenus each having many items which makes the mobile menu very long.

So, in this post I provide two ways of solving the issue.

Both of the solutions allow to collapse the nested items and let you choose whether to disable the parent links or keep them clickable on mobile devices.

Solution 1: Using the Divi MadMenu Module

The Divi MadMenu module allows to collapse the mobile menu submenus and enable/disable the parent item links in a few clicks only, no custom coding required.

You can choose between two submenu styles – Expand and Slide.

The Expand style makes the mobile menu submenus expand/collapse vertically when you click the parent menu item/arrow, also providing the Accordion Mode option which allows having only one expanded submenu of the same level at a time.

The Slide style is available in two variations – Slide Right and Slide Left, making the submenus slide in from right and left respectively (learn more here).

Solution 2: Collapse Divi Mobile Menu Submenus Using Custom Coding

This solution involves custom coding, all the code is provided below and works for both the Menu Module and the Fullwidth Menu Module.

 

Adding Custom JS

To implement this feature we’ll use JS and CSS. All the code is commented out properly to help you understand what it does.

First add the JS code into the  Divi Theme Options -> Integration.

<script type="text/javascript">
(function($) {
    /**
     * Collapse Divi mobile menu submenus.
     *
     * Works for both the Menu and the Fullwidth Menu modules.
     * The parent item links can be either disabled or clickable.
     * 
     * @site	https://divicio.us/
     *
     * @param	bool	parentClickable		Pass true to keep the parent menu item links clickable. Default: false.
     */
    function dvcs_collapse_menu_module_submenus_on_mobile(parentClickable = false) {

      // Mobile menu
      let $menu = $('.et_pb_module .et_mobile_menu');

      // Iterate the mobile menu links
      $menu.find('a').each(function() {
      
      // Menu hamburger icon
      let $menu_icon = $(this).parents('.mobile_nav').find('.mobile_menu_bar');

      // Remove click event handlers from the link
      $(this).off('click');

      // If the menu item DOESN'T HAVE submenus
      if( ! $(this).siblings('.sub-menu').length ) {

        // Close the mobile menu on link click
        $(this).on('click', (e) => $menu_icon.trigger('click'));

      } else {

        // If parent items links are DISABLED
        if( ! parentClickable ){

          // Replace the URL with the # symbol
          $(this).attr('href', '#');

          // Open/close the submenu on link click
          $(this).on('click', (e) => toggle_visible(e, $(this).parent()));

        } else {

          // Add the "clickable" class to the parent(<li> tag)
          $(this).parent().addClass('clickable')
            // Prepend the icon to parent
            .prepend('<span class="parent_icon"></span>')
            // Open/close the submenu on icon click
            .find('.parent_icon').on('click', (e) => toggle_visible(e, $(this).parent()));

          // Link click
          $(this).on('click', function(e){
            // Toggle the submenu if the link doesn't have a URL or anchor
            if ( $(this).attr('href') === '#' ) {
              toggle_visible(e, $(this).parent());
            } else {
              // Close the mobile menu
              $menu_icon.trigger('click');
            }
          });
        }
      }
    });
    
    /**
     * Toggles the 'visible' class on passed element.
     */
    const toggle_visible = (e, elem) => {
      e.preventDefault();
      elem.toggleClass('visible');
    }
   }

    $(function() {
    /**
     * Call the function with a delay to allow
     * the mobile menu(s) be ready first.
     * 
     * To keep parent links clickable pass true (boolean) as argument.
     */
     setTimeout(function() {
         dvcs_collapse_menu_module_submenus_on_mobile(true);
     }, 700);
   });

})(jQuery);
</script>

Adding Custom CSS

Then add the following CSS into Divi Theme Options -> Custom CSS field ( or into the child theme style.css file):

/* START: Collapse Divi Menu Module Submenus and Keep Parent Items Clickable on Mobile */

/* Parent menu item */
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable,
.et_pb_module .et_mobile_menu .menu-item-has-children > a {
  position: relative;
}
/* Parent menu item icon */
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable) > a:after,
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable > span.parent_icon:after {
  font-family: "ETmodules";
  text-align: center;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
/* Disabled parent menu item icon positioning */
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable) > a:after {
  position: absolute;
  top: 13px;
  right: 10px;
}
/* Clickable parent menu item icon */
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable > span.parent_icon {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  align-items: center;
  position: absolute;
  width: 46px;
  height: 46px;
  background: rgba(0, 0, 0, 0);
  border-left: 1px solid #dcdcdc;
  right: 0;
  top: 0;
  z-index: 9;
}
/* Collapsed submenu parent menu item icon */
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable) > a:after,
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable > span.parent_icon:after {
  content: "\33";
}
/* Expanded submenu parent menu item icon */
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable).visible > a:after,
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable.visible > span.parent_icon:after {
  content: "\32";
}
/* Hide submenu by default */
.et_pb_module .et_mobile_menu ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu > ul.sub-menu {
  display: none !important;
  visibility: hidden !important;
}
/* Show submenu */
.et_pb_module .et_mobile_menu .visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu .visible > ul.sub-menu,
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu .visible > ul.sub-menu {
  display: block !important;
  visibility: visible !important;
}

/* END: Collapse Divi Menu Module Submenus and Keep Parent Items Clickable on Mobile */

The JS script provided above allows to either disable the parent links or keep them clickable.

To disable the parent links call the dvcs_collapse_menu_module_submenus_on_mobile() function without passing any arguments (or pass false) to it. In this case clicking the parent item will only toggle the submenu.

Keep Parent Links Clickable

However, if you need to be able to toggle the submenus but at the same time the parent links still to be clickable then pass true as the argument.

In this case the parent item link will behave normally, (it can have a link or anchor, both will work) and clicking the arrow will toggle the submenu.

But if the clickable parent item does not have neither a link nor an anchor then clicking it will simply toggle the submenu.

Conclusion

That’s it, hope this will be helpful. Use this hack up untill ET adds this feature to core menu modules. If you have any questions or suggestions, feel free to leave them in the comments section below.

Become A Member 

Download FREE Divi Sections

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!