DiviMenus Flex

DiviMenus Flex

A powerful menu builder that brings the coolest design and popup to Divi!

Installation

The Divimenus Flex module is included in the DiviMenus Divi extension. If you have already installed DiviMenus, you can skip this section and start using the module.

In order to install the DiviMenus extension, you must first purchase a membership to Elegant Themes and install and activate the Divi Theme.

I have purchased through Elegant Themes Marketplace

Products purchased from The Divi Marketplace will work under your current Divi License, so no additional license is required. Just install your plugin, activate it and start using it!

The only difference between the “Divi Marketplace” version and the “DonDivi version” on our site is the License key.

Nothing to worry about!

I have purchased through DonDivi

If you have purchased this product at DonDivi, you will receive an email with the download link and your license key.

 

  • Install the ZIP file into your website and Activate it.
  • Introduce your License Key at DonDivi > Licenses and Activate it.
  • Use the Check License button whenever you want to check the status of your License.

After installing this Divi extension, two new modules are added to the Divi Builder called DiviMenus and DiviMenus Flex.

You can think of them as two different approaches for creating the final menu-like design. 

DiviMenus Flex uses CSS Flexbox and lets the browser to position the elements. This is the recommended menu builder for those who are used to work with Divi built-in modules.

DiviMenus, on the other hand, is the responsible for positioning the elements. This is the recommended menu builder for those who want to go one step further with absolute-positioned menus, such as circular ones or menus with titles near the menu items.

Please, choose the one that best fit your project. Whichever approach you use, you will be able to bring the coolest designs to Divi.

This is the documentation for the DiviMenus Flex module. The DiviMenus module documentation is available here.

Overview

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

DiviMenus Flex is not just a menu module as the name suggests. Actually, you can use it to build a menu, but also to build grids, custom layouts, buttons inside images or videos, social sharing buttons, filter tools, content toggles or even to display popups and show elements. The possibilities are almost endless.

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

DiviMenus Flex 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 Flex 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.

 

Getting Started

1. Go to the Visual Builder and choose the DiviMenus Flex module from the Divi modules list.

DiviMenus Flex - Divi modules list

2. Click “Add New Menu Item”. This way, a dummy Menu Item will be added next to the Menu Button.

DiviMenus Flex - Adding New Menu Item

3. That’s it! Start editing your DiviMenu template by using the module fields as described below!

DiviMenus Flex - text Menu Item
DiviMenus Flex - Menu Items 2

DiviMenu

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 > Direction

You can choose whether the Divimenus should display the Menu Items horizontally or vertically. This field is responsive so you can be able to set different directions in different devices. For example, you may want a Divimenu to be horizontal in desktop and vertical in tablet and phone devices.

DiviMenu > Show Opened

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

This module field is also responsive, so you can choose the opening behavior for each device as well.

Background

This module field (included in most Divi built-in modules) allows you to set a background to the DiviMenu.

Advanced > Custom CSS > DiviMenu

Here you can set custom styles for the DiviMenu in this box, such as the DiviMenu position. Please notice that you are styling the DiviMenu only. In case you want to style all the module (DiviMenu & Logo) you will have to set the custom styles in the Main Element box instead.

Advanced > Visibility > Show After Page Load

This module field will allow you to load the DiviMenu once the page has been fully loaded (actually, when the DOM has been fully loaded). This way you can prevent Flash Of Unstyled Content (FOUC). (The FOUC could temporarily show icons and images in a larger size than the one you defined from the module).

This option is disabled by default. Please be careful when using this field as you may need the DiviMenu to be available while the page content is being loaded.

Style

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

DiviMenu > Horizontal Alignment

Here you can choose the aligment of the Menu Items on the horizontal axis.

Left (default). In the left alignment the Menu items are placed at the begining and the available space (if any) is placed at the end.

Right. In the left alignment the Menu Items are place at the end and the available space is placed at the start of the container.

Center. The center alignment places the Menu Items in the center.

Justified. The justified alignment places the available space between the menu Items, and the left and right Menu Items line up flush with the start and end of the container.

DiviMenu > Vertical Alignment

Here you can choose the aligment of the Menu Items on the vertical axis (Top, Middle or Bottom). Default is Middle.

DiviMenu > Fullwidth Menu Items

By default, Menu Items are displayed at the width set by the user in the settings modal. However, you can choose to force the Menu Items to extend the full width of the container. This module field is responsive so you choose the devices where you can extend the Menu Items width.
Once you have extended the Menu Items width you will be able to align the Menu Item Content (see below the Menu Item Content field).

DiviMenu > Fullwidth Menu Button

Likewise, you can force the Menu Button to extend the full width of the container. This module field is also responsive.
Once you have extended the Menu Button width you will be able to align the Menu Button Content (see below the Menu Button Content Alignment field).

Spacing > DiviMenu Opening

Here you can choose the space between the DiviMenu elements. This module field is responsive and you can change this value for each device. For example, you may want smaller values for tablet and phone so the Menu Items don’t wrap.

In case you have a great amount of Menu Items we recommend that you reduce this spacing as muchs as possible (you can even set the DiviMenu opening to 0 and set some Menu Item Padding, link)

URL

See also the URL Link Type documentation

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.

 

URL Link Type
DiviMenus URL Link Type

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.

DiviMenus dynamic content

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.

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:

Show Link Type

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.

Design > Enter and Exit Effects

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

> Animations and custom effects

Sub

See also the Sub Link Type documentation.

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

Unlike the Show Link Type, this will not show an element from the page that is not related to the Menu Item. Instead, it will show either a Divi Layout or a WordPress menu that will be part of the Menu Item.

 

Sub Divi Library Link Type
Sub WordPress Menu Link Type

This is the preferred Link Type when it comes to show either sub elements, submenus or dropdowns.

Sub Link type: The easiest way to create a dropdown menu in DiviMenus!

The behavior will depend on the DiviMenu orientation:

If the orientation is horizontal, the sub element will be displayed over the page elements on Menu Item Hover and will disappear when hovering out the element.

On the other hand, if the orientation is vertical, the sub element will be displayed inline (or relative to) the page elements on Menu Item Click and will keep visible.

These are the module fields to show sub elements.

Content > Link > Source > Divi Library

Here you can select the Divi Layout from the Divi Library that you want to show as part of the Menu Item.

Tutorial: Creating a Mega Menu.

Content > Link > Source > WordPress Menu

Here you can select the WordPress menu from your WordPress menus  that you want to be part of the Menu Item. You will able to style the menu from from this settings modal > Design Tab > Sub & Box Shadow.

Learn more in the Sub Link Type documentation

Preview in the Builder

You can preview either WordPress menus or Divi Layouts in the Visual Builder by using the Preview in the Builder field.

If you are previewing a Divi Layout, please take into account that styles can differ. The correct styles will be applied in the front-end.

We recommend that you enable that field to see how the dropdowns will look in the front-end and disable it afterwards (once you have finished editing it).

Learn more in the Sub Link Type documentation

Content > Link > Sub Width

If you are using a Divi layout, you should have already set a width, if not you can set the width here.

If you are using a WordPress Menu you can use this field to override the default menu width (240px).

This field is responsive and we recommend that you use fixed units (like pixels) in horizontal DiviMenus.

Content > Link > Sub Offset

The Sub Offset field will allow you to set the distance between the Menu Item and the sub element.

Content > Link > Collapsible

Here you can choose whether or not the WordPress menu should be collapsible if it contains submenus. If so, you can choose the collapse icon (for the open and close submenu).

You can click all the WordPress Menu Item to toggle the submenu as long as you haven’t set a URL for the WordPress Menu Item. If you have set any, you will have to click the icon since the Menu Item will open the URL.

Content > Link > Show Arrow

Here you can choose whether an arrow should be displayed. If enabled, these new field will be available:

The Arrow Direction will allow you to change the arrow direction (upwards / backwards). If the arrow is upwards, it will be located at the top of the sub element; if the direction is downwards, it will be located at the bottom of the Menu Item instead.

Content > Link > Open URL

This field will allow you to open the URL introduced in the URL field rather than showing an element (submenu / dropdown) when clicking the Menu Item.

This way you will be able to open a URL on Menu Item click and show an element 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 the submenu 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.

Design > Sub> Alignment

Here you can choose the aligment of the element. Default is center.

Design > Sub> Arrow Color

Here you can set a custom color for the arrow. Default is #fff.

Design > Sub> Menu Items fields

Here you can set custom styles for all the WordPress Menu Items.

Design > Link > Enter and Exit Effects

Here you can animate the sub element both when entering and when disappearing.

> Animations and custom effects

Troubleshooting

Popup Link Type not showing up

Problem: The popup option is not being displayed in the Link Type select field.

Possible cause: 1. You don’t have any layouts in the Divi Library. 2. You do have, but all of them contain DiviMenus.

Solution: Add layouts to the Divi Library.

This is also applicable to the Sub Link type.

Saved layouts not being displayed in the “Popup” or “Sub” select

Problem: The “Popup” or “Sub” select is not displaying a layout you previously created and saved in the Divi Library.

Possible cause: Your layout contains a DiviMenu (Elegant Themes does not allow to include a module inside the same module at the moment).

Solution: Use layouts that do not contain Divimenus for your “Popups” or “Subs”.

This is applicable to the “Popup” and the “Sub” Link Types.

logo - relative position

Cause: DiviMenus Flex uses CSS Flexbox to display the module elements. This is normal behaviour since we have a Flex container with two Flex items (Logo and DiviMenu) and the logo takes up some space.

Solution: Change the logo position to absolute so the DiviMenu takes up all the available space.

Option 1. Go to Advanced > Custom CSS > Logo, click the Divi responsive option, select the tablet / phone tab and type position:absolute;

Option 2. Go to Design > Logo, enable the Absolute Position field.

logo - absolute position

Advanced

CSS Selectors

DiviMenu ICON items
.dd-divimenu .et-pb-icon
DiviMenu IMAGE items
.dd-divimenu img
DiviMenu TEXT items & DiviMenu TEXT + ICON or IMAGE items
.dd-divimenu .dd-text
Menu Button
.dd-divimenu .dd-menu-button-content
Menu Button TEXT
.dd-divimenu .dd-menu-button-content > .dd-text-content
Menu Item
.dd-divimenu .dd-menu-item-content
Menu Item TEXT
.dd-divimenu .dd-menu-item-content > .dd-text-content
Active Menu Item
.dd-divimenu .dd-menu-item-content.active
Active Menu Item TEXT
.dd-divimenu .dd-menu-item-content.active > .dd-text-content

Custom breakpoints

You can customize your Divimenu for desktop, tablet and mobile from the module settings modal. The Divi breakpoints are 768px for mobile and 980px for tablet.

Also, you can use media queries to set custom breakpoints. For example, we are going to reduce the text font size when the screen size is smaller than 1160px.

@media only screen and (min-width: 981px) and (max-width: 1160px) {
  .dd-divimenu .dd-text-content {
    font-size: 10px!important;
  }
}
We recommend that you assign a custom class to the DiviMenu we want to customize:
@media only screen and (min-width: 981px) and (max-width: 1160px) {
  .custom-divimenu .dd-divimenu .dd-text-content {
    font-size: 10px;
  }
}

In order to change the space between Menu Items you can use the margin property (please use margin-left, margin-right, margin-top or margin-bottom depending on your Divimenu orientation) and apply the style to the .dd-mi-w class. For example, this CSS code will reduce the space when the screen size is smaller than 1160px.

@media only screen and (min-width: 981px) and (max-width: 1160px) {
  .custom-divimenu .dd-divimenu .dd-mi-w {
    margin-left: 5px!important;
  }
}

This way, you can use media queries along with the CSS selectors above to create custom breakpoints.

Videos

Introducing the DiviMenus Flex module!

ENGLISH 🇺🇲

¡Presentación del módulo Divimenus Flex!

ESPAÑOL 🇪🇦

Introducing the logo!

Changing to a sticky logo on page scroll

Tutorial: Creating a Mega Menu.