Collapse Mobile Menu Submenus

1. Collapse submenus
2. "Expand" submenus style
3. "Slide" submenus style
4. Customizing the "Slide" submenus header
5. Make parent items clickable

Collapse submenus

The  Collapse Submenus setting of the Divi MadMenu Mobile Menu element makes the mobile menu submenus collapsible allowing the user to toggle the submenus by clicking the parent menu item or it's arrow (depending on the Parent Links Clickable setting, as explained below). 

This feature is especially useful for complex mobile menus having many submenu items/levels which do not fit into small mobile devices screens. 

You can find the Collapse Submenus setting in MadMenu Settings -> Content -> Mobile Menu section.

There are two different styles available for the collapsed mobile submenus: Expand and Slide, the latter having two variations - Left and Right.

"Expand" submenus style

The default style of the collapsed submenus is the Expand style allowing to expand/collapse submenus vertically.

Enabling the Collapse Submenus setting also adds the Accordion Mode setting available for the Expand submenus style only. The Accordion Mode setting makes the previously expanded submenu close when another submenu of the same level has been clicked to expand thus allowing only one submenu expanded at a time which helps keep the mobile menu more compact.

"Slide" submenus style

The Slide submenus style (available since v1.8.0) makes the collapsed mobile submenus slide in from left or right rather than expand/collapse vertically(as with the Expand submenus style) when clicking the parent item/arrow. 

There are two slide options available: Slide Right and Slide Left, the Slide Right option making the submenu slide in from right, whereas the Slide Left - from left.

The height of the mobile menu will adjust depending on the height of the currently visible submenu unless the mobile menu height has been set in MadMenu Settings -> Design -> Mobile Menu -> Mobile Menu Height (and/or the Mobile Menu Min Height and Max Height). 

If the height set for the mobile menu is less than the height of the currently visible menu/submenu items then the mobile menu content becomes vertically scrollable to allow the user access all menu items.

"Slide" submenus header elements

The Slide submenus have a header containing the Back button for going back one level, the Home button for going all the way back to the main menu, and also the submenu header Label.

"Slide" submenus header text/label

Selecting one of the Slide options for the collapsed submenus reveals the Use Submenu Header Text setting allowing to add text (label) to the submenu header. This setting provides three different options: 

1. Parent Item Text - the parent item's text is used as the submenu header label.
2. Custom Text - allows using custom text for submenu headers.
3. No Text - select this option if you don't want to add a label to the submenus header.

Selecting the Custom Text option provides a text field for adding the desired text for the submenu header.

Customizing the "Slide" submenus header

The "Slide" submenus header inherits the design of the mobile menu items by default so that it blends into the overal design of the mobile menu as much as possible. However, if you need more control over it's design you can use the custom CSS fields to apply any customizations you want using just a few lines of CSS. 

The Custom CSS fields are available for the Submenu Header, Submenu Header Text, as well as the Back and the Home buttons, and can be found in the MadMenu Settings -> Advanced -> Custom CSS section. 

Make parent item links clickable

By default the Parent Links Clickable setting is disabled which makes the parent links disabled and clicking the parent item just toggles the submenu.

However, if you need the submenus to be collapsible but the parent item links still be clickable then simply enable the Parent Links Clickable setting. This will make clicking the parent item arrow toggle the submenu, whereas clicking the parent item link will redirect the user to the linked page.