With the DonDivi Nav Menu, you can build a robust, feature-rich navigation system complete with submenus, popups, cart information, and more. The layout, styling, and animations can be easily customized for a responsive, professional-looking menu.
Installation
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 dondivi-builder.zip file.
Click on the Install Now button.
Once installed, you will find a new module named DonDivi Nav Menu in the Divi Builder.
Overview
The DonDivi Nav Menu module lets you place a navigation menu anywhere on your site. Menu items can link to URLs, open submenus, or trigger popups.
You can also apply DonDivi effects for smooth enter and exit animations and integrate with WooCommerce or Easy Digital Downloads carts.
Overall, it is a flexible, responsive menu that looks great on all devices.
Add DonDivi Menu
Click on the Add Module button.
Search for DonDivi Menu.
Click on it to add it to your page.
DonDivi Menu Settings
Content tab
Menu
Direction: Choose if menu items display horizontally or vertically:
Row / Row Reverse: Horizontal
Column / Column Reverse: Vertical
Enable Mobile Menu: Although the Direction field alone can create a responsive menu, you may want a separate mobile icon that toggles menu items open or closed. Enable this if you prefer that behavior on certain screen sizes.
If enabled, the following options will be available:Show Mobile Menu On: Select which device sizes (desktop, tablet, phone) should use the mobile menu. This field is responsive.
Mobile Menu Icon: Select the icon used to open and close the menu. This field is responsive, allowing you to assign different icons to different devices. You can also set a hover icon (when the menu is open).
Logo: This setting allows you to display or hide a logo on specific devices. It is responsive. You may also upload a sticky version of the logo, using Divi's sticky option.
Logo Link URL: If the logo is clickable, enter the destination URL here.
URL Opens: Decide whether it opens in the same or a new tab.
Design Tab
Menu:
Horizontal Alignment: Align items on the horizontal axis (Left, Right, Center, or Justified).
Vertical Alignment: Align items vertically (Top, Middle, Bottom). This is useful if the menu is vertical or if your logo is placed on the left or right.
Mobile Menu: This option will appear if the Enable Mobile Menu option is enabled:
Width: Sets the mobile menu container width (default 100). You can adjust it for different devices.
Alignment: If the width value is less than 100%, you can also choose how the mobile menu is aligned.
Background Color: Change the mobile menu background (responsive).
Enter Effect: Select an effect when the mobile menu slides open (default is None). Adjust animation intensity, optional opacity, and duration (default 1000ms).
Exit Effect: Select an effect when the mobile menu slides close (default is None). Adjust animation intensity, optional opacity, and duration (default 1000ms)
Mobile Menu Icon: When the mobile menu is active, this toggle provides options to style the icon, including alignment, color, font size, margin, and padding.
Logo: Choose the logo image placement, alignment, width, offset, and margin:
Placement: By default, the logo is on the left. You can place it on the right, top, or bottom.
Horizontal Alignment: When the logo is placed at the top or bottom of the page, it should be aligned horizontally. The default is Left.
Vertical Alignment: Align the logo vertically when placed on the left or right. The default is Middle.
Logo Width: Adjust the width of the logo. The default is 150px, but you can use Auto to retain the original size.
Logo Margin: Add a responsive margin around the logo.
Menu Items:
Fullwidth: Forces items to fill the container's entire width. This setting is responsive.
Text Alignment: Position the item text horizontally (Left is the default). This option also applies to the mobile menu.
Background Color: Affects all menu items. Also applies to the mobile menu.
Gap: Creates spacing between menu items. The default is 0. Responsive.
Margin & Padding: Adjust space around or within each menu item (responsive).
Menu Items Text: Configure font family, weight, style, color, size, letter spacing, line height, and text shadow for item text.
Menu Items Text: Choose the text styles such as the font family, style, size, letter spacing, and more.
Sizing: Choose the DonDivi Menu's sizing styles.
Spacing: Choose the DonDivi Menu's spacing styles.
Border: Choose the DonDivi Menu's border styles.
Box Shadow: Choose the DonDivi Menu's box styles.
Filters: Choose the DonDivi Menu's filter styles.
Transform: Choose the DonDivi Menu's transform styles.
Animation: Choose the DonDivi Menu's animation type and styles.
Add a DonDivi Menu Item
When you add the DonDivi Menu module, it will not contain any menu items by default.
Open the DonDivi Menu module's settings
Click on the Add New Item button
Single DonDivi Menu Item Settings
Content tab
Menu Item: Each item can include text, an icon, or an image. It may open a URL, show a sub-menu, or trigger a pop-up.
Title: The item's title (also appears in the list of items). If the item displays text, this title is shown in the menu.
Content:
Icon: Display an icon of your choice.
Text (default): Display a text of your choice.
Image: Displays an image of your choice.
Image/Icon: If Text is selected, you can add an image or icon next to it. The default is None, but it's responsive, so you can display images on some devices and icons on others or hide them altogether.
Placement: When using Text with an image or icon, choose whether the image or icon is on the left (default), right, above, or below the text.
Content
Link Type: Select how the item behaves:
URL (default): This opens a URL. Enter the link in the URL. Then, choose whether it opens in a new tab.
Popup (Divi Layout): This triggers a popup that loads a Divi Layout. To avoid conflict, layouts containing another Nav Menu module are hidden.
Preview in the Builder: Temporarily shows how the popup looks on the front-end.
Show On Hover: Opens the popup on hover instead of click.
Show Close Icon: Adds a close icon inside the popup.
Close On Icon Click Only: Prevents closing by clicking outside. The user must click the close icon or press the ESC key.
Disable Page Scroll: Locks the page scroll while the popup is open.
Popup (Custom): Triggers a custom-content popup.
Preview in the Builder: Temporarily shows how the popup looks on the front-end.
Show On Hover: Opens the popup on hover instead of click.
Show Close Icon: Adds a close icon inside the popup.
Close On Icon Click Only: Prevents closing by clicking outside. The user must click the close icon or press the ESC key.
Disable Page Scroll: Locks the page scroll while the popup is open
Sub (Divi Layout): Shows a sub menu containing a Divi Layout. No nested Nav Menu layouts are allowed.
Sub (Custom): Shows a sub-menu with custom content.
Sub (WordPress Menu): Shows a sub-menu containing a WordPress menu.
Preview in the Builder: Enable this to preview how the sub menu looks in the front-end while editing.
Display Behavior:
Hover (default): The sub menu is overlaid on hover and closes on mouseout.
Click: The sub menu is overlaid on click and remains until clicked again.
Toggle: The sub menu is inserted inline below the menu item, pushing page elements down, and remains until clicked again.
Width: Adjust the width of the sub menu (default 240px).
Offset: Set the distance between the menu item and sub content (default 15px).
Collapsible: This option allows you to collapse sublevels. If enabled, you can select a Collapse Icon for open and closed states.
Show Arrow: Displays a small arrow pointing from the sub content to the menu item. Responsive setting.
Arrow Offset: Adjust the arrow's horizontal position (default 50 percent). This is perfect for aligning the arrow when the subtext is left—or right-aligned. It is responsive.
Open URL: If the item has a URL, this field opens that link when clicked, even if a sub-element is present.
Use Toggle Icon: This option adds an icon next to the menu item that allows you to expand or collapse the submenu. Clicking this icon toggles the submenu. You can choose a custom icon and style it in the Design tab.
URL: If the Link type is set to URL, you can define which URL the menu items should open.
URL Opens: If the Link type is set to URL and the URL field is filled in, choose how the link will open:
In the same Window (tab).
In a new Window (tab).
Enable Active Page: If enabled, the menu item appears active (using hover styles) when its URL matches the current page URL.
Background: Choose a solid background color, gradient, or image to be applied to the Menu item.
Desing Tab
Menu Item Text: Choose the font family, style, text color, size, and text shadow of the current menu item.
Content:
Alignment: Align the sub-content (default Center). Justified/Fullwidth forces the sub to take the entire screen width.
Background Color: Assign a color for the sub-content.
Arrow Color & Width: If Show Arrow is enabled, these fields style the arrow.
Padding: Adjust the sub menu's internal spacing. Good for WordPress Menus or custom content.
If in the Content tab → Content → Link Type you choose Popup (Divi Layout) or Popup (Custom), the following design options will appear:
Location: Position the popup in one of nine screen spots, top-left, top-center, etc.
Popup Max Width / Popup Max Height: Limit the popup's size. The default is 80 percent.
Background Color / Overlay Color: Change the popup's background or the overlay behind it.
Close Icon Color & Width: Style the close icon if it is displayed.
Border & Padding: Add a border, radius, or padding around the popup if using custom content.
Text Alignment: Align content text left, right, or center if using custom content.
WordPress Menu: This option appears if the link type is set to be Custom (WordPress menu) in the Content tab → Content → Link Type and it allows styling the WP menu items with background color, font, size, letter spacing, line height, padding for top-level items, and separate padding for sub-level items.
Content Title: Choose the font family, style, text color, size, and text shadow of the current menu item's title text.
Content Body: Choose the font family, style, text color, size, and text shadow of the current menu item's body text.
Content Button: Choose the current menu item's button.
Content Animation: Choose the animation of the current item's content.
Sizing: Choose the current menu item's size, including width, max width, module alignment, and more.
Spacing: Select the current menu item's spacing, including margin (outer spacing) and padding (inner spacing).
Box Shadow: Select the box shadow styles for the current menu item.
Filters: Select the filters for the current menu item.
Transform: Select the transform styles for the current menu item.
Animation: Select the animation for the current menu item.
Additional Content and Design Settings
Shopping Cart
If WooCommerce or Easy Digital Downloads is active, the Shopping Cart toggle appears in the Menu Item's content tab, allowing you to add cart functionality.
A matching toggle also appears in the design tab to style the cart quantity badge.
Note:
This option is available only for icon and image items.
Content tab
Shopping Cart
Is Shopping Cart: If enabled, clicking this item directs the user to the cart page, overriding any specified URL. You can still show or hide submenus with a toggle icon if desired.
eCommerce Platform: Pick WooCommerce (default) or Easy Digital Downloads as the cart platform.
Show Cart Quantity: This option displays a red badge over the menu item, showing the cart quantity. The quantity updates dynamically without requiring a page reload. You can choose whether it shows a zero value.
Desing tab
Shopping Cart: Style the red cart badge's background color, font, text color, size, and shadow. For more advanced styling, use Advanced Tab → Custom CSS → Cart Quantity.
Advanced → CSS Selectors
Below are some helpful classes:
.ddb-logo — Main container for the logo
.ddb-logo > img — The logo image element
.ddb-menu — Main menu container
.ddb-mobile-wrapper — Mobile menu wrapper
.ddb-mobile-icon — Mobile menu icon
.ddb-mobile-menu — Mobile menu dropdown
.ddb-item — Each menu item wrapper
.ddb-item.active — Active menu item
.ddb-item:visited — Visited menu item
.ddb-item .ddb-text — Menu item text element