Divi Mobile Menú

Your menu tree picks the style, not the other way around

You try the mobile menu styles, settle on the most striking one and publish. Opening it on a phone, you find your submenus do not fit. Services, Products and their inner pages were left with no place, because that design was never meant to hold them.

Before choosing by looks, count the levels in your menu. Circle Stretch Down and Bottom Navigation do not support sub-items, and Side by Side reaches two levels: parent and child. The depth of your navigation narrows the list of possible styles.

Divi Mobile lets you create mobile menus for the Divi theme without writing code. It starts from premade styles, adds control over the header and the hamburger icon, and lets you place Divi library layouts inside the menu itself.

Controls for the header, icon and submenus

• Premade styles: pick one and adjust colors, fonts and spacing.
• Custom header: logo, background, height, sticky behavior and position of the search and cart icons.
• Hamburger icon: custom icons, animations, colors, size, position and your own SVG.
• Submenus: several styles, with animations, colors and indentation.
• General settings: breakpoints, menu assignment, animations and navigation behavior.
• Hamburger on desktop: the menu can also be used on large screens.

A menu that also carries search and calls to action

Divi Mobile can inject layouts made with the Divi Builder. You can place them above or below the menu, inside submenus or above the header. It serves, for example, to put a search bar, a call to action or social icons inside the panel itself.

For submenus, the layout is assigned by adding its ID as a CSS class on the item. And any Divi element, such as a button, can open and close the menu with a CSS class and a short jQuery script in Theme Options.

Where it is configured and what your theme affects

These are the limits that shape the work most:

• It is configured in the Customizer: the style is defined under Appearance > Customize. Only the injected layouts are made with the Builder, so the whole menu is not built as a module.
• Settings belong to the active theme: if you move to a child theme later, you will have to configure your menus again. Activate the child theme first.
• Theme Builder: if your header was made there, enable the Theme Builder button and place the [divi_mobile_tb_menu] shortcode in a code module, once only.
• Pre-release versions of Divi: it should not be used with them on production sites.

First menu in the Customizer

Divi Mobile needs the Divi theme, best kept at its latest version. With the plugin active:

1. Write down your menu levels on paper and rule out the styles that do not support them.
2. Go to Appearance > Customize and open the general settings.
3. Select a premade style and check that Mobile Header Style is set to Divi Mobile.
4. Assign your primary menu and choose its movement, such as Expand from outside screen.
5. Enable the custom header and upload the logo.
6. Adjust the background, colors and text size, and review the result on a real phone.

Different routes for navigation in Divi

You need Divi as the base. If you are after floating buttons or groups of interactive elements more than your WordPress menu, DiviMenus works in that area: it is a module that does not render WordPress menus.

If your site does not use Divi, this plugin is of no use to you. In that case, look at Responsive Menu Pro or Max Mega Menu Pro.

Questions when planning the mobile menu

Can I use submenus in any style?

No. Circle Stretch Down and Bottom Navigation do not support sub-items.

How many levels does Side by Side allow?

Two: parent and child.

Does it work with a Theme Builder header?

Yes, with the shortcode and the activation button in the general settings.

Can I use the hamburger on desktop?

Yes, the plugin allows it.

Is everything built with the Divi Builder?

No. The menu is styled in the Customizer, and the Builder comes in for the layouts you inject.

Can I use my own icon?

Yes, by uploading your SVG code.