Collapse Divi mobile menu submenus
To collapse Divi mobile menu submenus go to Divi -> Theme Customizer -> Mobile Menu Customizer -> Submenu Settings and find the COLLAPSE SUBMENU setting.
The submenus are not collapsed by default and to collapse them simply set this setting to Yes.
Setting the COLLAPSE SUBMENU to Yes reveals four new settings below:
- MAKE PARENT MENU ITEM CLICKABLE
- ENABLE ACCORDION
- CUSTOMIZE PARENT ITEM ARROW
- SUBMENU ANIMATION
MAKE PARENT MENU ITEM CLICKABLE
When the submenus are collapsed the parent item link becomes disabled by default and clicking on it does not load a new page but just toggles the submenu.
If enabled this setting prevents the parent menu item from being disabled, clicking the parent item redirects to the page it is linking to while clicking the arrow icon toggles the submenu.
ENABLE ACCORDION
If enabled this setting allows having only one expanded submenu at a time. Each time a new submenu is expanded the previously expanded submenu collapses.
CUSTOMIZE PARENT ITEM ARROW
This option allows customizing the parent menu item arrow. Enabling it reveals a set of design options for styling the arrow(change the icon and make it rotate when the submenu is toggled, change its size, spacing, border, colors).
SUBMENU ANIMATION
Provides 10 different animations for submenu as well as the No Animation option.
This feature is available for the Default, Centered and Centered Inline Logo header formats.
If you've used the Divi Menu or Divi Fullwidth Menu modules to create your website's menu and want to collapse the mobile menu submenus, this tutorial on our blog is for you. The custom solution in this guide not only allows you to collapse mobile submenus but also gives you the option to disable or keep the parent item links clickable.