A powerful menu builder that brings the coolest designs and popups to Divi, using the browser's CSS Flexbox positioning. This is recommended for anyone comfortable with Divi's standard row-and-column approach.
Installation
The DiviMenus Flex module is part of the DiviMenus extension. After purchasing and downloading the DiviMenus extension (either from the Elegant Themes Marketplace or DonDivi), install it as follows:
Install and activate the Divi Theme.
Go to WordPress Dashboard → Plugins.
Click on the Add New Plugin button.
Click on the Upload Plugin button.
Choose the divimenus.zip file.
Click on the Install Now button.
Click on the Activate button to activate the plugin.
When installed, two new modules appear in the Divi Builder:
DiviMenus (absolute-positioned)
DiviMenus Flex (flex-positioned)
Both share many features, but pick the approach that best suits your layout. DiviMenus Flex is especially good for linear, row/column, or typical "menu-like" layouts.
Overview
The DiviMenus Flex module lets you create beautiful, custom designs in real time, whether you want a simple navigation bar, social sharing buttons, popup triggers, filter systems, or content toggles.
It's fully responsive, works with the latest Divi versions, and supports Divi's dynamic content and hover features.
Note:
Like DiviMenus (non-Flex), this is a "menu builder" for creating new custom menus; it does not render existing WordPress menus.
Getting Started
In the Visual Builder, choose the DiviMenus Flex module from the modules list.
Click Add New Menu Item to insert your first item.
Adjust the module settings for layout, style, link types, and so on.
A DiviMenu here consists of:
Menu Button (the opener, optional).
Menu Items (the clickable elements).
You can also add an optional Logo.
DiviMenu Behavior
Content Tab → DiviMenu
Direction: Select horizontal or vertical arrangement of the menu items (responsive). For instance, you might want horizontal on desktop but vertical on mobile.
Show Opened: If enabled, the menu starts fully open on page load. This is responsive as well (e.g., open on desktop, closed on mobile).
Background: Sets a background behind the entire menu. E.g., a color or image.
Advanced → Custom CSS → DiviMenu: Lets you apply additional custom styles specifically to the DiviMenu portion (not including a separate logo).
Advanced → Visibility → Show After Page Load: Delays rendering the DiviMenu to prevent "flash of unstyled content" (FOUC). Typically, keep this off unless needed.
Advanced → Transitions → Opening Duration: The time (ms) for the menu items to transition in/out when the menu is opened or closed. Default 300ms.
Style (Design Tab) → DiviMenu
Horizontal Alignment: If the direction is horizontal, pick Left, Right, Center, or Justified alignment for the items.
Vertical Alignment: If the direction is vertical, pick whether items align Top, Middle, or Bottom. The default is Middle.
Fullwidth Menu Items: Force all menu items to stretch the full container width (responsive). If enabled, you can choose how to align the item contents.
Fullwidth Menu Button: Likewise, force the button to fill the container width (responsive). Then, align the button's internal content.
Spacing → DiviMenu Opening: This controls the spacing between menu items (and between the button and items), making it responsive to each device.
Logo
DiviMenus Flex can optionally include a logo next to your menu. Perfect for brand identity.
Content Tab → Logo
Logo: Enable and upload an image for your logo. This is fully responsive and can differ on sticky states.
Logo Link URL: Typically, link it to your homepage. Decide the logo's link behavior:
The link opens in the same tab
The link opens in a new tab
Style (Design Tab) → Logo
Placement: Position the logo on the left, right, top, or bottom of the menu. Responsive field.
Horizontal Alignment: If the logo is on top or bottom, align it horizontally to the left, right, or center.
Vertical Alignment: If the logo is on the left or right, align it top, middle, or bottom. The default is Middle.
Width: Adjust the logo's displayed width (default 150px). "auto" uses the image's original size.
Absolute Position: If enabled, the logo is absolutely positioned, letting the menu items fill more space. This is useful for mobile menus or full-width items.
Spacing → Logo Margin: By default, the margin is 0. Set a custom margin if needed.
Menu Button
The optional button toggles the entire menu open/close. You can style or hide it if you want the menu always open.
Content Tab → Menu Button
Position: If horizontal or vertical, choose First or Last in the row/column.
Content: The main type: Icon, Image, or Text for the button.
Hide: Hides the button entirely (menu remains open).
Disable: Button is visible but not interactive.
Show Icon / Image: Combine an icon or image alongside text. A new field appears for the icon/image.
Apply Hover Options: Divi Hover Options apply on hover by default. Choose On Click if you want a pressed style instead.
Style (Design Tab) → Menu Button
Content Alignment: If the button has space, align the text/icon left, right, center, or justified.
Resizing Effect: Optionally shrink the button size when the menu is open.
Background Color: The button's background.
Rounded Corners / Border: Adjust corners and border.
Menu Button TEXT / ICON / IMAGE: Style each aspect (font, color, size, opacity).
Spacing → Menu Button Margin: The default is 0. Adjust if needed.
Spacing → Menu Button Padding: The default value is 15px around the button content.
Menu Items
These are the clickable elements that appear. Each item can have an icon, image, or text. You can define a link type (e.g., open a URL, show a pop-up, reveal an element, etc.).
Style (Design Tab) → Menu Items
Menu Items TEXT / ICON / IMAGE: Configure all items' backgrounds, corners, fonts, colors, etc., collectively. DiviMenus Flex can use any Divi fonts (not restricted to monospace).
Spacing → Menu Items Padding: The default value is 15px of internal padding for each item.
Individual Menu Item Settings
Within each item's settings, you can override global defaults.
Content Tab → Menu Item
Title: The item's label in the settings, or the text if you chose Text content.
Content: Icon, Image, or Text. If Text is selected, it uses the item's Title.
Disable: Make it non-clickable.
Show Icon / Image: This option allows you to combine an icon or image with text. A new field for choosing the icon or image appears, along with placement and device-based show/hide.
Apply Hover Options: Switch from default hover to "On Click" if needed.
Shopping Cart: If WooCommerce is installed, a new toggle can let this item be a cart button.
Link → Close DiviMenu On Click: Close the entire menu after clicking.
Link → Close Other Menu Items: If the item reveals content (Show link type), you can close the rest upon hover/click.
Link → Link Type: URL, Popup, Show, Sub, etc. (explained below).
Style (Design Tab) → Menu Item
Alignment → Menu Item Content
Align the item's icon, text, or image if the item's container has extra space.Alignment → Menu Item
Allows you to place some items on the left, center, or right within the main row. Great for partial groupings.Menu Item TEXT / ICON / IMAGE
Overriding the global style.Spacing → Margin / Padding
Adjust spacing around or inside a specific item beyond the global settings.
Link Types
DiviMenus Flex supports several link types for each Menu Item:
URL: Standard link (with optional Active State that highlights the item if the URL matches the current page).
Popup: Opens a Divi Library layout in a popup. Great for modals or forms.
Show: Reveals or toggles another element on the page by ID/class (e.g., sublevels, tooltips, content toggles).
Sub: This displays an inline or drop-down sub-element (Divi Layout or WP menu). It is ideal for mega menus or multi-level menus.
Troubleshooting
Popup Link Type Missing: Ensure you have at least one Divi layout in your library that doesn't contain another DiviMenu.
Saved Layout Not Appearing: The layout likely includes a DiviMenu, which can't be embedded in itself.
Fullwidth Menu Items + Logo: If your orientation is vertical and the items are fullwidth but don't fill the entire row on mobile, set the Logo to Absolute Position to free that space.
Advanced → CSS Selectors
Some frequently used classes for styling:
.dd-divimenu-wrapper
.dd-divimenu: Entire module container
.dd-menu-button-content: Menu Button
.dd-menu-item-content: Each Menu Item
.dd-text-content: Text inside items or button
.dd-icon-content: Icon element
.dd-divimenu img: Images used by items or the button
.active: Applied when a Menu Item is active (matching page URL or toggled on)
If Divi's defaults (768px mobile, 980px tablet) aren't sufficient, you can also set custom breakpoints using media queries.
Videos