Advanced Menu Overview

Advanced Menu Module for Divi makes it easy to style an interactive menu for your Divi websites. This module has two interdependent parts: the menu editor dashboard and the builder module. Menu Editor Dashboard works with menu settings inside your WordPress dashboard. And the builder module functions like a Divi default module.

Note: Changes made by activating the DiviFlash Menu Editor dashboard only affect the DiviFlash Advanced Menu Module. If you want to customize or design a WordPress menu, you must create a menu in your WordPress dashboard.

Menu Editor Dashboard

DiviFlash menu editor features help you customize the website menu. These features apply exclusively to each menu item.

To use the DiviFlash menu editor, head over to the WordPress Dashboard and navigate to Appearance> Menus. On the next screen, create a new menu or select an existing one. 

You will find the Enable/Disable DiviFlash Menu Settings option to the right of your menu name box. Activate it, and then you will see an Edit Menu button with each menu & submenu item.

Next, you can edit menu items with the following features:

Mega Menu

  • Enable mega menu: Turn it on to add a Mega Menu functionality.
  • Mega menu Column: From the dropdown select the column number between 2 to 6.
  • Content Width Type: The width option includes: Normal/Full/Custom. *Choosing custom width reveals the next two settings.
    • Custom Width (px): Enter the mega menu width value in this box in pixels.
    • Menu Position: Define the mega menu alignment, either bottom left, bottom center, or bottom right.

NB: The Layout Setting Option disappears when you enable the Mega Menu. But you can add any menu layout from the Divi library using the layout setting.

Layout Settings

  • Submenu Type: Keep the normal layout or choose from your Divi Layout. *Selecting Divi Layout adds the below option.
    • Library Item: Select your layout from the Divi library. *Note, this feature appears if you previously selected the Divi Layout option.

Icon & Image Settings

  • Use Only Icon/Image: Use only an icon or image instead of a text menu item.
  • Menu Icon Settings: Pick an icon for your menu and set its color.
  • Icon/Image Position: The left-right positioning of the image or icon.
  • Menu Image Settings: Enable the “Use Image” option to attach an image as a menu item. Also, define the image width in pixels.

NB: Image and icon can’t be used simultaneously. 

Tooltip Settings

Add your tooltip text, customize the text with color and background color, and set the Tooltip positioning.

Badge Settings

Offer the same customization as the tooltip setting. However, you can enable the arrow feature for the badge.

Item Position

This feature works under a submenu when you enable the Mega Menu option. You can locate a submenu position under the menu dropdown. Here, the submenu item position changes according to the column number of the mega menu.

The Divi Builder Module

The DiviFlash Advanced Menu module is not limited to menu functionality. Rather, it provides elements to create a complete header, including a logo, menus, buttons, icons, search, etc.

Tip: Using the Divi theme builder, apply this module to your Divi global header to make a complete Divi website header.  

Note: To make this module work, add child items. And whenever you add this module, it loads with three child items. Remove or add more child items as required.

Child Items

This module works in conjunction with global features and child items. Let’s first take a closer look at child items in the content tab of global module settings. You can deploy eight different child items with their independent customization.

These are-

  • Logo
  • Menu
  • Button
  • Search
  • Text
  • Woo Cart
  • Icon Box
  • Divider

Depending on your header design, you can use these child items. And all the functional elements are divided into three categories identical to the default Divi module settings.

  • Content Tab
  • Design Tab
  • Advanced Tab

Child Item Content Tab

The child item content tab is the starting point for adding foundational elements to your design. Different structural properties appear on the child item content tab as you select each child item type. 

Go to Module Settings> Content Tab > +Add New Item to get started.

Element Type – Logo

  • Logo: Add your logo image or use the dynamic option to display your featured image, author profile picture, and site logo as your header.
  • Sticky Logo: This setting is the same as the previous one.
  • Logo Alt Text:  Insert your image ALT text for the logo.
  • Logo Link URL: Add the URL that will follow after clicking the logo.
  • Logo Link Target: Define the URL to open a new or existing tab.

Element Type – Menu

Under the content option,

  • Menu: Select your preferred menu from the dropdown.
  • Layout (large device): Keep or hide the menu layout on the large device.
  • Layout (small device): Show or hide the menu layout on the small device.
  • Submenu Reveal Animation: Choose the submenu revealing animation from three different effects.
  • Submenu Distance Desktop: Define the distance between the menu & submenu for the desktop.

Under Menu Item Hover Animation Option,

  • Enable Item Animation: Enable this option for showing animation on hover.
  • Menu Item Hover Animation: Select any of the five animation effects for your menu to show on hover.
  • Line Weight: Determine the line weight of the hover animation. The default weight is set to 2px.
  • Line Color: Set the line color for the hover animation.

Under Mobile Menu Trigger Button,
Select another icon to change the default three-line icon for the mobile menu, choose icon color, size, background, and apply padding around the mobile icon.

Under Mobile Slide Elements,
Enable it to use a button while the menu opens up into a slide on the mobile device. Also, add button text, URL, icon, and define the left/right positioning of the icon.

Element Type – Button

  • Button Text: Enter the text you would like to show on the button.
  • Button URL: Insert the URL that you want to direct through this button.
  • Button Link Target: Choose to keep the URL in the same window/browser tab or a new one.
  • Use Button Icon: Turn it on for using an icon to the button and define its left/right positioning.

Element Type – Search

Under the content option,

  • Search Style: Add a search option from 5 different search stylers.
  • Placeholder: Include the text (label hints) in the search form.
  • Submit Icon Setting: Show a different submit icon and pick a color for the icon & icon background. 
  • Input Background Color: Select the input background color.
  • Icon Size: Define the search bar size.

Element Type – Text

  • Content: From the content box, you can write anything and use the text as a header element.

Element Type – Woo Cart

  • Cart Icon Setting: Change the default cart icon with a new one. Set the color and size of the cart icon.
  • Cart Item Count Setting: Enable the cart item count, and choose its color and background color.
  • Cart Total Setting: Enable the cart’s total amount and colour it differently.

Element Type – Icon Box

  • Icon Setting: Select your icon, pick a color, and define the size.
  • Title Attribute: Enter the text you want to show when hovering over the icon.

Element Type – Divider

  • Divider Width: Set the width of the divider.
  • Divider Color: Choose the color of the divider.

Common content tab elements:

Let’s see the common content tab elements of all child items:

  • Item Position On Desktop: Set the exact position of a child item in the header area. Define the row positioning with three header row types (Top, center, bottom). Also, there are three-column placements. (Left, middle, right)
  • Item Position On Small Device: Do the same as the above feature for small devices like tab, mobile, etc.
  • Disabled On: Disable/hide any particular child item according to device type.
  • Link: Add a link to navigate another page through this child item.
  • Background: Here’s the background customizing setting for child elements. You can see several options, such as color, gradient, image, video, pattern, and mask.  
  • Admin Label: Modify the item name according to your preference. Your selected name will also show in the wireframe view.

Child Item Design Tab

Text Style

This feature gives control of all the typography-related customizations of child elements. You can manage the child item’s text font style, weight, alignment, color, size, letter spacing, line height, and text shadow. 

Desktop Top-Level Menu Items

From here, you can set the looks of your primary menu for the desktop device. You can add background colour, determine the gap between menu items, and adjust their padding & margin. Icon styles include icon color and icon size.

The menu item typography can be customized by changing the font and its style, weight, color, size, and line height. There are some border customization features for menu items. These features cover rounded corners, border width, color, and 7 different border styles.


Under the submenu feature, there are two separate parts. First, you have the container customization settings, such as background color, rounded corners, box shadow, border width, color, style, etc.

Next, you have the item part for the submenu. Here, customization is the same as the Desktop Top Level Menu Items feature. Note that, there is not any item gap option.

Mega Menu

The Mega Menu feature has a similar setting to the submenu. However, the exception is, Mega Menu has a column gap feature in the container part to determine the gap between columns. Also, you can set the padding around mega menu items.

Mobile Slide

The mobile slider also presents two different parts. For the first part (item), follow the Desktop Top Level Menu Items feature. And the second part lets you style the mobile slide’s button. Customizations include adding background colors, setting margins & padding, styling typography, and modifying button borders.

NB: You have to enable the “Show Mobile Slide on Builder” setting under the Builder View feature of the global content tab to see your customized changes in the mobile slide.

This design tab has other features like Sizing, Spacing, Border, Box Shadow, Filters, and Transform. Follow this documentation to learn more about these features.

Child Item Advanced Tab

  • Custom CSS: Set Custom CSS for the child item styling. 
  • Conditions: Set single or multiple conditions for displaying child elements. 
  • Visibility: Set horizontal & vertical overflow from here and show or hide the child item for a particular device.
  • Transitions: Set the child item’s transition duration, delay, and curve speed.
  • Positions: Set positions type from Default, Relative, Absolute, and Fixed. Also, enter the Z-Indexed value.
  • Scroll Effects: Set scrolling effects using diverse animation, motion, and transition effects.

Global Features of Advanced Menu Module

Global features are dedicated to the entire module. You will find them divided into three categories.

  • Content Tab
  • Design Tab
  • Advanced tab

Advanced Menu Module Content Tab

Apart from the child items, other customizing and supportive features exist in the module content tab.

Under Settings Option,

  • Menu BreakPoint: Enter the width in pixels to set the menu break point. Devices smaller than the width you provide will appear as responsive menu/ hamburger menu/ mobile menu.

NB: Disable On feature of child elements also works according to this breakpoint to determine the small devices. 

  • Mobile Slide Background: Choose a background type between solid color, gradient, or image.

Builder View

Enabling the Show Mobile Slide on Builder option shows the mobile slide output in your visual builder while editing.

The remaining three features (Link, Background, Admin Label) of the global content tab function similarly, as shown before in the case of the child element.

Advanced Menu Module Design Tab

Under Top/Center/ Bottom Row Settings,

All the customizing settings are the same for the first three features of the design tab.

  • Hide When Sticky: Enabling it will allow hiding any of the rows from the sticky header.
  • Background: Select a solid color, gradient, or image background type individually for each header row.
  • Inner Wrapper Max Width: Select the maximum width of the inner wrapper. Enter a value in pixels or %.
  • Margin & Padding: Add margin & padding to expand space around the menu components of the header row and align the design with other on-page elements.
  • Border Settings: Choose the roundness, thickness, color, and style of the border around the header row.

Check this documentation to know other features of the global design tab, such as Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation.

Global Advanced Tab

Check this document to learn about all the basic features of Divi Advanced Tab.

Submit a Comment

Your email address will not be published. Required fields are marked *