Divi MadMenu v1.8: Create Slide Submenus for Divi Mobile Menu
Collapsing the mobile menu submenus helps keep the mobile menu more compact preventing it from expanding beyond the viewport on small mobile screens.
Divi MadMenu allowed collapsing the mobile menu submenus since day one. Enabling this feature makes the mobile menu smaller and more user-friendly, the users can toggle the submenus by clicking the parent menu item or it’s arrow, and submenus expand/collapse vertically.
And Divi MadMenu v1.8 makes this feature even better by adding a new style for the collapsed submenus: the Slide style coming in two variations – Slide Right and Slide Left.
The Slide submenus slide in from left or right instead of expanding/collapsing vertycally like the default style (the Expand style), and this allows to keep the mobile menu even smaller.
Enabling the Slide Submenus
Then select either the Slide Right or Slide Left option of the Submenu Style setting.
Slide Submenu Header Elements
The Slide submenus have a header containing the following header elements:
- the Home button for going all the way back to the main menu items
- the Back button for going back one level
- the Label (text)
Slide Submenu Header Text (Label)
The Use Submenu Header Text setting allows to add the label to the Slide submenu header and you can select one of the three available options:
- Parent Item Text – the text of the submenu’s parent menu item will be used as the submenu header label
- Custom Text – allows using a custom text for the label
- No Text – the header label won’t be added
Customizing the Slide Submenus Header
The Slide submenu header will inherit the mobile menu items design by default so that it matches the overal design of the mobile menu.
However, if you need more control over the submenu header design you can use the available custom CSS fields in MadMenu Settings -> Advanced -> Custom CSS section to apply any design you want with just a few lines of CSS.
That’s it, hope you’ll enjoy this new feature. Stay tuned for more great features coming soon for Divi MadMenu.
Hi, nice addition! I added it in Desktop Mode and it’s awesome. Besides, how can I change the Hamburger Icon for another?
Hi Sergio.
Thanks for you question. Current version of Divi MadMenu does not provide an option to change the Mobile Menu element’s hamburger icon, however, you can use custom CSS to do that. For example, this CSS will set a different hamburger icon from the ET font icons set for the mobile menu:
.dvmm_mobile_menu_toggle_icon:before {content: "\63" !important;
}
You can see all ET font icons codes here.
Divi MadMenu also provides an alternative way to create a mobile menu using the Header Popups feature and one of the Button elements, so, for the button you can add any icon from the sets of icons available in the Divi Builder, or choose the option to upload your custom hamburger icon for the button.
And inside the popup mobile menu use the MadMenu Vertical Menu module to display your mobile menu.
Hope this helps.
Is it only for mobile?
Hi Francois.
Yes, this feature is availble for mobile menu only at the moment. But you can show the mobile menu on desktop too if you like (by setting a larger breakpoint for the Mobile Menu element in the settings).
UPDATE: the Slide submenus feature is now available in the MadMenu Vertical Menu module as well, you can use this new menu module to create inline vertical menus anywhere on the page, or popup menus using the Header Popups feature, both for desktop and mobile devices.
This is a fantastic addition Ivan…going to implement it right away on a couple of my installations.
Thank you for the continued support sir!
Thank you for using Divi MadMenu, Dehn :)