The DiviMenus module allows you to create* beautiful Divi designs using a menu-like builder in real time.

DiviMenus is not just a menu module as the name suggests. Actually, you can use it to build a menu, a grid, a custom layout creator, a button inside an image or video, a social sharing tool, a filter system, or even a popup generator. The possibilities are almost endless.

You can have a look at some pre-made layouts here.

DiviMenus is fully responsive and compatible with the latest versions of Divi, the Visual Builder and the Theme Builder. Also, you can also take advantage of the coolest Divi features, such as the mobile options, the hover options, dynamic content for the destination links, etc.

* DiviMenus is a powerful menu builder (i.e. you can use it to create new menus, not to render your WordPress menus). This module will allow you to create and customize new kinds of menus instead of only customizing existing WordPress menus as most menu modules do.

A DiviMenu is a menu created by this module. It has a Menu Button and it can have as many Menu Items as you want. These elements will be explained in detail later in this documentation. In order to add a new Menu Items you only have to click the Add new Menu Item button in the module settings modal.

Behavior

You can control the DiviMenu behavior in the Content tab of the Divimenu settings modal by using the following module fields.

DiviMenu > DiviMenu Shape

You can choose the shape of your DiviMenu, Please watch the videos above to check out the stunning and easy way to create them.

DiviMenu > Show Opened

Activate this option if you want the DiviMenu to be opened on page load. This might be useful when you want all the Menu Items to be visible from the beginning.

DiviMenu > Display Inline

If this option is disabled, your DiviMenu elements will be displayed over the page content. If enabled (default), the plugin will make room to display the DiviMenu, so it will be displayed inside the module itself.

When displaying a DiviMenu inline, you might want the height to be adjusted to the DiviMenu state (open / closed). Likewise, you may want the height to be fixed. You can handle this with the Equal Height Opened/Closed field.

DiviMenu > Equal Height Opened/Closed

If enabled, the module height will always be equals to the opened Divimenu. Otherwise, the module height will be adjusted. This is, it will increase to the DiviMenu opened height when the DiviMenu is open and will decrease to the Menu Button height when the DiviMenu is closed.

Divimenu > Bring to Front

In most cases you won’t need to enable this option. However, the Menu Items might be placed over other columns and be under that other column elements. If you want the DiviMenu to ve over those elements you need to enable this option.

Background

You can set a background for the entire DiviMenu by using this Divi module field.

The border radius will be automagically adjusted depending on the DiviMenu shape. However, if you don’t want a rounded background, you can switch on the Square Corners toggle field.

Style

You can customize the DiviMenu style in the Design tab of the Divimenu settings modal by using the following module fields.

DiviMenu Alignment > DiviMenu Alignment

Please watch the videos above to check out the stunning and easy way to align your DiviMenus (Left Center, Right, Justify).

Spacing > DiviMenu Opening

The DiviMenu Opening responsive field allows you to set the distance between the Menu Button and the Menu Items for each device (desktop, tablet and phone).

Also, in horizontal and vertical DiviMenus, this field will set the distance between Menu Items.

The default value is 25px.

Spacing > DiviMenu background

The DiviMenu Background field allows you to set the distance between the DiviMenu elements and the DiviMenu background, in case your DiviMenu has a background.

You can set a DiviMenu background from the content tab

The Menu Button is the DiviMenu opener. It allows you to open and close the DiviMenu.

You can customize the Menu Button style and content (Icon / Image / Text).

You can also hide it or even disable it for click events (useful to show your DiviMenu always opened).

In addition to that, you can add a title to the Menu Button. A title is a informative name that are displayed along with your Menu Button . You will be able to choose either to hide or display them, as well as define whether or not they should be only displayed on hover.

Behavior

You can control the Menu Button behavior in the Content tab of the Divimenu settings modal by using the following module fields.

Menu Button > Position

This field allows you to choose the Menu Button position (First / Middle / Last) for horizontal and vertical DiviMenus. Please, go up to the Divimenu Shape section to see the different Menu Button (the purple item) positions.

Menu Button > Type

This field allows you to choose the Menu Button content. That is, the content that is being displayed in the Menu Button.

DiviMenus accepts Icons*, Images (both 1:1 and original aspect ratio) and Texts** as the Menu Button content.

* If you are using Font Awesome icons that are not square, you will may want to use DiviMenus Flex instead. Same for the Menu Items icons.

**DiviMenus uses monospace fonts for the text Menu Items. This way we can offer you lots of options (paddings, distances, sizes, etc.) to customize all the aspects of your DiviMenu. The website fonts are available for the Menu Item Titles. Please watch these videos to better understand how to use “Texts” in “DiviMenus” and “DiviMenus Flex”

> Use Any Font on “Text” Menu Items: Use “Titles” instead

> Differences using Texts on “DiviMenus” and “DiviMenus Flex” modules

After selecting the Menu Button type, you will be able to set the content in the Menu Button Icon / Menu Button Image / Menu Item Text field.

Menu Button > Hide

Turn on this option if you don’t want to allow the users to open and close the DiviMenu. If this option is enabled, the DiviMenu will only display the Menu Items.

This field depends on the Show Opened field. You can only hide the Menu Button if the DiviMenu is open.

Menu Button > Disable

Turn on this option if you don’t want to allow the users to open and close the DiviMenu. Unlike the Hide the Menu Button field, the menu Button will be displayed along with the Menu Items.

Menu Button > Apply Hover Options

We are offering the ability to set hover styles and content (Divi Hover Options) for most of our module fields (same as Divi does).

The Divi Hover Options are applied on hover. This is the default behavior.

However, you may want to apply the Divi Hover Options only when clicking so the Menu Button styles do not change when hovering hover it. You can achieve this behavior by selecting the On Click option here.

Menu Button Title > Show Title

This toggle field will allows you to display the Menu Button title.  If you enable the Menu Button title, the following mofule fields will appear:

Menu Button Title > Menu Button Title

Here you will be able to enter the title that you want to be displayed along with the Menu Button.

Menu Button Title > Display

This select field allows you to choose whether display the Menu Button titles always or when hovering over the Menu Button only.

If you select Always, you can make the title clickables by activating the Make Clickable field. This way, the title will be a link rather than just an informative name.

If you select Hover,  you can force the title to be displayed always on mobile and tablets.

Menu Button Title > Hide Title on Phone

No matter the option selected in the Display field, you can hide the titles on phone devices by using this toggle field.

Style

You can customize the Menu Button style in the Design tab of the Divimenu settings modal by using the following module fields.

Menu Button > Use background

The Menu Button background is optional. You can disable it by using this toggle field.

If enabled, you will be able style the background color, rounded corners and border from this Menu Button toggle.

Also, when the Menu Button background is enabled, you will be able to use the Fit to Content field in case you want the background to be adjusted to the Menu Button text.

Menu Button > Resizing Effect

This option will reduce the Menu Button size when the DiviMenu is open. Take this into account when using paddings. For eample, if this option is enabled and the DiviMenu Opening Padding value is 0, there will be a gap because of this effect.

Menu Button TEXT

You can style the Menu Button text in this toggle.

Menu Button ICON

You can style the Menu Button icon in this toggle.

Menu Button IMAGE

You can style the Menu Button image in this toggle. The Opacity effect fields allows the image to be lighter when hovered.

Menu Button Title

In this toggle we offer field so you can change the title position (where you want it to be displayed), offset (distance from the Menu Button), maximum width (you can split here the title into several lines). Furthermore, you can even add a background and style it (color, fonts, paddings, etc).

Spacing > Menu Button Background

The Menu Button Background responsive field allows you to set the distance between the Menu Button content and the Menu Button Background.

The default value is 15px.

The Menu Items are clickable elements that perform different actions depending on their Link Type. You can add as many Menu Items as you want. They are the main elements of your DiviMenu.

Content

You can control all the Menu Items behavior in the Content tab of the Divimenu settings modal by using the following module fields.

Menu Items > Type

You can select a type for the Menu Items content (Icons* / Images** / Text***) and thereafter set the content. This content will be displayed in each Menu Item.

*If you are using Font Awesome icons that are not square, you will may want to use DiviMenus Flex instead.

**Make sure to use 1: 1 square images in order for them to be displayed correctly, since rectangular images are only allowed in the Menu Button.

***DiviMenus uses monospace fonts for the text Menu Items. This way we can offer you lots of options (paddings, distances, sizes, etc.) to customize all the aspects of your DiviMenu. The website fonts are available for the Menu Item Titles.

Same way as the Menu Button, you can disable all the Menu Items from the Disable toggle field if you don’t want them to be clicked and just want them to be displayed as is.

Menu Items Title > Show Titles

This toggle field will allows you to display Menu Items titles.

Menu Items Title > Display

This select field allows you to choose whether display the Menu Items titles always or when hovering over the Menu Button only.

If you select Always, you can make the title clickables by activating the Make Clickable field. This way, the title will also open / close the DiviMenu.

If you select Hover,  you can force the title to be displayed always on mobile and tablets.

Menu Items Title > Hide Title on Phone

No matter the option selected in the Display field, you can hide the titles on phone devices by using this toggle field.

Style

You can customize the Menu Items common style in the Design tab of the DiviMenu settings modal by using the following module fields.

For single Menu Items, you can define each Menu Item content, style and link type from their settings modal (this will be explained in the next section).

Menu Items

Here you can style the Menu Items background (unlike the Menu Button, the Menu Items background is required).

The Menu Items toggle allows you to style all Menu Items background color, rounder corners and border.

If you are displaying text menu Items two new field will appear:

The Equal Backgrounds field allows you to display all the Menu Items backgrounds equal in size. Please, disable this option to keep the individual Menu Items background.

Finally, you can also use the Fit to Content field in case that you want the background to be adjusted to the text.

Menu Items TEXT

You can style all Menu Items texts in this toggle.

Menu Items ICON

You can style all Menu Items icons in this toggle.

Menu Items IMAGE

You can style all Menu Items images in this toggle. The Opacity effect fields allows the image to be lighter when hovered.

Menu Items Title

In this toggle we offer field so you can change the Menu Items title position (where you want it to be displayed), offset (distance from the Menu Item), maximum width (you can split here the titles into several lines).

Furthermore, and same as we saw with the Menu Button, you can also add a background and style them (color, fonts, paddings, etc).

As a result, you can create cool titles designs (such as tooltips)

Spacing > Menu Items Background

The Menu Item Background field allows you to set the distance between the Menu Item content and the Menu Item Background. This will be applied to each Menu Item, unless otherwise specified in the custom Menu Items settings.

Remember that you can override this field for each Menu Item.

The default value is 15px.

The Menu Item Setting modal allows you to define the content, behavior, style and link type of the selected Menu Item.

Behavior

You can control the Menu Item behavior in the Content tab of the Menu Item settings modal by using the following module fields.

Menu Item > Title

This will set the Menu Item text or title (depending on the content you are displaying). If displaying text Menu Items, ahother field will apper to set the title.

This title will be used to display this Menu Item in the Menu Items list.

Menu Item > Hide

You can hide this Menu Item from this responsive toggle field.

If you turn on this toggle field, the Menu Item will be removed on the device(s) that you choose. If you also turn on the Preserve Space field (available when the Hide field is enabled), the Menu Item will be hidden instead.

Menu Item > Disable

Turn on this option if you don’t want to allow the users to click on the Menu Item.

Menu Item > Apply Hover Options

We are offering the ability to set hover styles and content (Divi Hover Options) for most of our module fields (same as Divi does).

The Divi Hover Options are applied on hover. This is the default behavior.

However, you may want to apply the Divi Hover Options only when clicking so the Menu Item styles do not change when hovering hover it (this can be useful to recreate checkboxes, etc). You can achieve this behavior by selecting the On Click option here.

Link > Close DiviMenu On Click

Enable this option if you want the DiviMenu to be closed after clicking this Menu Item. (Use cases: select dropdowns, collapsible navigation…)

Link > Link Type

DiviMenus offers different link types. This will be discussed and explained in detail in the following section.

Style

You can customize the Menu Item style in the Design tab of the Menu Item settings modal by using the following module fields.

Menu Item > Use Custom Styles for this Menu Item

You can use custom style for this Menu Item by enabling this field.

If enabled, several fields will appear to style the background color and border. You will also be able to use the Fit to Content field for this Menu Item only.

If this field is disabled (default) the style will be inherited from the style set in the DiviMenus settings modal.

Menu Item TEXT

If the Use Custom Styles for this Menu Item field is enabled, this toggle will appear so you can style the Menu Item text.

Menu Item ICON

If the Use Custom Styles for this Menu Item field is enabled, this toggle will appear so you can style the Menu Item icon.

Menu Items IMAGE

If the Use Custom Styles for this Menu Item field is enabled, this toggle will appear so you can style the Menu Item image.

Menu Item TITLE > Position

This field will allow you to change the title position of this Menu Item.

Menu Item TITLE > Hide

This field will allow you to hide the title of this Menu Item.

Spacing > Use custom Background for this Menu Item

If enabled, you will be able to override this Menu Item padding.

When you click a Menu Item, something occurs. You can define this behavior by selecting a Link Type option as shown in the screenshot below.

URL

This option is the most commonly used as you probably will want the Menu Item to open a destination URL.

You can enter manually the URL. In case you want to enter a existing post, page, project or any WordPress post, you can take advantage of the Dynamic Content option that the plugin offers, as shown in the following screenshots.

Once the Dynamic Content is selected, we only have to choose the link we want to add. For this example we will select the Post link and a list with the existing posts will be displayed as shown below.

This is the recommended way of entering your website URLs. Please, use this option whenever possible and enter manually the link for custom and external URLs.

Enable Active State

If this toggle field is enabled, the Menu Item will become active when the introduced URL matches the current page URL.

This is also useful when creating anchor links, as the Menu Item active state will change on page scroll.

Remember that in order to display active Menu Items, you first have to apply hover styles to them. This way, when the Menu Item URL matches the current page URL, the hover styles will be applied and the Menu Item will be highlighted.

Popup

See also the Popup Link Type documentation

This option allows you to show a popup rather than opening a destination URL.

You can pop up any layout saved in the Divi Library by selecting them from the Divi Layout select field.

Design

Since a popup is a Divi layout being displayed over the page content, you can create your popup in the Visual Builder, and afterwards save it into the Divi Library.

Popups can be a either a Section, a Row or simply a Module.

In order to ensure the best popup experience, the popup will keep all the styles and animations even when they are clicked over and over as showing here or here (please, click on some menu item and close the popup several times).

Location

You can use the Location field to change the popup position (there are 9 options). Default is center.

Popup Size

The popup will take up to 80% of the screen width. You can change this default value by going to the Design Tab -> Popup -> Popup Max Width (as of diviMenus 1.3). For example, if you want the popup to be full width, you have to change this field value to 100%. Same for decreasing the popup width.

DiviMenus will set automatically the width to the layout (Section / Row / Module) if necessary so that you don’t have to adjust anything in order to display the popup correctly.

Also, DiviMenus will restrict the width of the layout in order for the popup width to be smaller than the screen width on larger screen sizes. You can disable this limit behavior by going to the Design Tab -> Popup -> Limit Width on Large Screens.

Of course, you can go to the Divi Library and use the Divi Settings Modal to customize the popup size:

• Design Tab > Sizing > Max Width:  For example, you may want your popup to be only 400px in desktop.
• Design Tab > Spacing > Margin & Padding: You may also want to change or remove the spacing around, especially in sections and rows layouts.

Note: The padding is part of the popup size, so we recommend that you use a background color in case your popup includes outer padding, in order to recognize all the popup parts.

Overlay

All Popups have a space around by default which is required to close them (you can add them a close button as well). You will notice that the pointer becomes an X there.

The default overlay color is Black 40%: rgba(0,0,0, 0.4)

You can customize the Overlay in the Design Tab.

Enter and Exit Effects

You can animate the popup both when opening and when dismissing. 

> Animations and custom effects

Show

See also the Show Link Type documentation.

This option allows you to show an element rather than opening a destination URL.

This opens up a lot of possibilities related to visibility. Basically, you can design the elements of your page and decide which ones to show or hide when clicking or hovering a Menu Item.

For example, you can create buttons to show and hide elements, content toggles and visibility filters. You can also recreate menu sublevels, which are very convenient when it comes to menus! (remember that DiviMenus is not a module to render WordPress menus, it is a powerful tool that brings to Divi the coolest designs using a menu-like builder).

How to show and hide elements

Even though using this Link Type is pretty straightforward, we are going to guide you through all the steps so you can see how it works.

First, you have to select the Show option from the Link Type dropdown:

Element CSS ID

Type here the CSS ID of the element you want to associate with this item. You can bind any element of the current page to the Menu Item. Since DiviMenus 2.1, you can also bind multiple elements by typing their CSS IDs separated by commas.

Element CSS Class

Type here the CSS Class of the element (or elements) you want to associate with this item. You can bind any CSS class to the Menu Item, as well as multiple CSS classes separated by commas.

Show On Hover

Here you can choose whether or not this Link Type should be triggered when hovering over the menu item. If enabled, the element will be displayed on Menu Item hover and click.

Toggle Visibility

This is the expected behavior of the element when you click the Menu Item.

If the Toggle Visibility field is turned on, the element will become visible if it was hidden and the other way around.

If you turn off the Toggle Visibility field, you will show the element, no matter the previous visibility state.

Keep Visible

Here you can define the expected behavior once the element has been shown. If you turn on this module field, the element will be visible even though you click on another Menu Item, otherwise the element will be invisible.

This option is useful to reproduce the different steps of a procedure.

Hide On Menu Button Click

Here you can choose whether or not to hide the element when closing the DiviMenu. This module field is enabled by default

Hide On Page Click

Here you can choose whether or not to hide the element by clicking outside.

Initial State

Finally, you might want to set the element initial visibility state when page is loaded. By default is hidden.

Open URL

This field will be visible if the Show On Hover field is enabled and will allow you to open the URL introduced in the URL field rather than showing an element (or elements) when clicking the Menu Item.

This way you will be able to open a URL on Menu Item click and show an element (or elements) on Menu Item hover.

Keep in mind that this option won’t work on touch screen devices (mobiles, tablets, etc) in order to be able to show elements when tapping the Menu Item.

Also, if the Enable Active State toggle field is enabled, the Menu Item will become active when the introduced URL matches the current page URL. This is also useful when creating anchor links, as the Menu Item active state will change on page scroll.

Enter and Exit Effects

You can animate the element both when showing and when disappearing. 

> Animations and custom effects

CSS Selectors