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.

Submenu

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.