Skip to content
StoreDocsSupport
Get Divi Torque

Modules

Menu Maker

Menu Maker puts any WordPress menu in the Divi Builder. Lay it out horizontally or vertically, style each state visually, and turn on a mobile menu with a slide-in drawer.

Menu Maker puts any WordPress menu into the Divi Builder as a module. You can lay it out horizontally or vertically, style the normal, hover, and active states visually, and switch on a mobile menu with a slide-in drawer, without touching the theme's own header.

Its main use is inside a Divi Theme Builder header template, where it replaces Divi's built-in menu with one you can position and style like any other module.

How to add the Menu Maker module

  1. Create a menu under Appearance > Menus if you do not have one yet.
  2. Add a section and row, then insert the Menu Maker module.
  3. In Content > Content, choose your menu and set the orientation.
  4. If you want a mobile menu, switch on Enable Mobile Menu in Content > Mobile.

Content

Content

  • Menu: The WordPress menu to display. Pick it from the list of your menus.
  • Menu Orientation: Horizontal for a standard header row, or Vertical for a sidebar or footer column.

If the Menu field shows a plain text box instead of a list, enter the numeric ID of your menu. To find it, open Appearance > Menus, select the menu, and read the number after menu= in the browser address bar.

Mobile

  • Enable Mobile Menu: Off by default. Turn it on and the module shows a hamburger button on small screens that opens a slide-in drawer containing the same menu. Leave it off if your header already provides its own mobile navigation.
  • Mobile Breakpoint: The screen width in pixels below which the menu collapses into the hamburger. The default is 767.
  • Drawer Position: Left or Right. This is the side the drawer slides in from.

Design

Top Level

  • Alignment: Left, Center, or Right within the column.
  • Spacing: The gap between top-level menu items, from 0 to 100 px.
  • Hover Text Color, Hover Background, Active Background: Colors for a hovered item and for the item matching the current page.
  • Item: A Divi border and spacing group applied to each top-level item, for pill-shaped or boxed items.

Menu Text

Three font groups, each with the standard Divi font controls:

  • Normal: Top-level items.
  • Active: The item that matches the current page, which shows visitors where they are.
  • Dropdown Items: Items inside a dropdown.
  • Dropdown Min Width, Dropdown Offset, Item Spacing: Size and spacing of dropdown panels.
  • Hover Text Color, Hover Background: Colors for a hovered dropdown item.
  • Open Animation: Fade or Slide Up.
  • Show Dropdown Arrow: Shows an arrow on items that have a dropdown. On by default.
  • Dropdown: Background, border, and box shadow for the dropdown panel.

Mobile Menu

  • Drawer Width: The width of the slide-in drawer. The default is 100%.
  • Overlay Color: The color of the page overlay behind the open drawer.
  • Hamburger Color and Hamburger Size: The color and width of the hamburger icon.
  • Drawer: Background and spacing for the drawer.
  • Drawer Items: Font settings for the links in the drawer.

The standard Divi Background, Border, Box Shadow, and Spacing groups apply to the menu container.

How the mobile menu behaves

Tap the hamburger to open the drawer. Tap the overlay, choose a link, or press Escape to close it. Items with a dropdown open as an accordion inside the drawer.

Tip

Place Menu Maker inside a Divi Theme Builder header template rather than on individual pages. One template gives every page the same header, and you can still use Theme Builder conditions to serve a different menu to logged-in users or to a specific section of the site.

Frequently asked questions

Where do I find my menu?

Open Content > Content in the module and choose it from the Menu list. If the module shows "Please select a menu to display", no menu is chosen or the saved menu no longer exists.

Does Menu Maker support dropdown submenus?

Yes. Nested items in your WordPress menu render as submenus. You can style them in the Dropdown group.

Is there a mobile menu?

Yes, but it is off by default. Turn on Enable Mobile Menu under Content > Mobile to get a hamburger button and a slide-in drawer on small screens.

Does Menu Maker work in Divi 5?

Yes. Menu Maker is a Divi 5 module, including the mobile drawer, and the module also runs in Divi 4.

Is Menu Maker part of Divi Torque Pro?

Yes. It is a Divi Torque Pro module. See pricing.