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

by | Nov 3, 2019 | 2 comments

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 a solution for the issue. It allows to collapse the nested items and lets you choose whether to disable the parent links or keep them clickable on mobile devices.

Works for both the Menu Module and the Fullwidth Menu Module.

 

Adding 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://www.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');
    }
   }

    $(document).ready(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 {
  display: none !important;
  visibility: hidden !important;
}
/* Show submenu */
.et_pb_module .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 */

Disable Parent Links

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.

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

Pin It on Pinterest

Shares
Share This