Cyber Monday Sale Is Here!

Divi MadMenu v1.8: Create Slide Submenus for Divi Mobile Menu

by | Feb 12, 2022 | 6 comments

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

To enable the Slide style for the mobile menu submenus first you need to collapse the submenus in MadMenu Settings -> Content -> Mobile Menu -> Collapse 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
Selecting the Custom Text option reveals a text field for adding your desired text.

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.

View Live Demos & Get Divi MadMenu

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!

You have Successfully Subscribed! Please confirm your email address.

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

You have Successfully Subscribed! Please confirm your email address.

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

You have Successfully Subscribed! Please confirm your email address.