Menu

The menu that this module offers has menu items and optionally a logo.

Let’s have a look in this section at the fields that will let you create a customize a menu.

Next, we will show you how to customize the menu items from their settings modal.

Content Tab > Menu > Direction

You can choose whether the menu should display the menu items horizontally or vertically.

Row and Row Reverse will display the menu horizontally.

Column and Column Reverse will display the menu vertically.

This field comes with responsive options so you can be able to set different directions in different devices. We recommend that you follow a mobile-first approach.

For example, you may want a menu to be horizontal in desktop and vertical in tablet and phone devices.

This way, you can create responsive menus and you don’t need anymore.

Content Tab > Menu > Enable Mobile Menu

Although you can use the previous fields to create a responsive menu, you may want to display an icon that opens and closes the menu items rather than showing directly all the menu items (from now this will be called Mobile Menu).

Performance note: The mobile menu won’t be rendered in the DOM when this field is disabled. Meaning that no additional HTML output will be added to the document (post / page).

Want a mobile menu to be displayed on desktop, tablet or phone screen sizes? If so, enable this field.

Content Tab > Menu >  Show Mobile Menu On

Here you can choose the device(s) where the mobile menu should be displayed.

Content Tab > Menu >  Mobile Menu Icon

Finally, here you can choose the mobile menu icon. This field comes with responsive options, so you can select different icons for specific devices.

Also, you can use the hover option to select the icon that should be displayed when the mobile menu is open.

Content Tab > Logo > Logo

Here you can choose whether a logo should be displayed or not.

This field is responsive, meaning that you can display a logo either for all devices or only for specific devices.

You can also display a different logo when the menu is sticky. You can do it, as you can already imagine, by clicking the Divi Sticky Option and selecting the sticky logo.

Content Tab > Logo > Logo Link URL

When adding a logo, chances are that you want to make it a link (usually to the home page). If so, you can enter the destination link here.

You can also choose whether the link will be opened in the same browser tab or not.

Design Tab > Menu > Horizontal Alignment

Here you can choose the aligment of the menu items on the horizontal axis.

Left (default). The menu items are placed at the begining and the available space (if any) is placed at the end.

Right. The menu items are place at the end and the available space is placed at the start of the container.

Center. This 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.

Design Tab > Menu > Vertical Alignment

Here you can choose the aligment of the menu items on the vertical axis. Default is Middle.

Note: if you are displaying a logo beside the menu and you want to verticallly align both the logo and the entire menu within the module container, please use the Logo Vertical Alignment field instead.

Design Tab > Mobile Menu > Width

Here you can set the width of the mobile menu container. Default is 100%,

If you decrease the width, you will be able to use the Alignment field in order to align the mobile menu within the module.

As usual in the DonDivi Builder, these two fields are responsive. Meaning that you can change the width and alignment for either  all devices or specific devices only.

Design Tab > Mobile Menu > Background Color

This responsive field allows you to set a background color to the mobile menu.

Design Tab > Mobile Icon

This toggle will be available when using a mobile menu and offers several responsive fields to style the mobile icon.

You will be able to set the icon alignment, color, font size, margin and padding.

Design Tab > Logo > Placement

By default the logo is located at the left of the menu. This field will allow you to change the logo position to the right, top or bottom.

This field is also responsive, meaning that you can have different placement on different devices.

Design Tab > Logo > Horizontal Alignment

Here you can choose the horizontal aligment of the logo on the horizontal axis.

Default is Left. The horizontal alignment will be applied when the logo placement is top or bottom.

Design Tab > Logo > Vertical Alignment

Here you can choose the aligment of the logo on the vertical axis (Top, Middle or Bottom).

Default is Middle. The vertical alignment will be applied when the logo placement is left or right.

Design Tab > Logo > Logo Width

You can use this responsive field to customize the logo width.

Default is 150px. You can use the auto value to display the original image size.

We recommend that you crop the image (if necessary) before uplading it in order to avoid display issues on page load.

Design Tab > Logo > Logo Margin

Finally, you can use the Logo Margin responsive field to add a margin to the logo.

Design Tab > Menu Items > Fullwidth

This will 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 probably want to align their content. In order for you to do that, the Alignment field comes into play.

Design Tab > Menu Items > Text Alignment

This responsive fields will offer you several options to place the menu item content horizontally.

Default is left.

Of course, this will be applied to the mobile menu as well.

Design Tab > Menu Items > Background color

This field will allow you to set a custom background color that will be applied to all menu items.

Of course, this will be applied to the mobile menu as well.

Design Tab > Menu Items > Gap

This field will allow increase the distance between the menu items. Default is 0.

And yes, this field is also responsive and the gap is applicable to the mobile menu!

Design Tab > Menu Items > Margin & Padding

These two responsive fields will allow you to play with the menu items spacing.

Design Tab > Menu Items Text

These toggle fields will let you customize the menu items text.

Here you will be able to change the font family, font weight, font style, text color, text size, letter spacing, line height and text shadow. These changes will be applied to all menu items.

Menu Item

You can create a new menu item by clicking Add New Menu Item. A new modal called Menu Item Settings will appear where you will be able to customize the menu item.

Each menu item can contain a text, an icon or an image. If containing a text, a icon or image can be placed next to it. Also, when showing a sub menu, a toggle icon can be also displayed to open and close the menu.

Regarding the menu item behavior, they can either open a URL, show a sub menu or trigger a popup.

Let’s now break down all of this.

Content Tab > Menu Item > Title

This title will be displayed in the menu items list. Also, if you choose the menu item content to be a text (see the Content field below), this title will be displayed in the menu item.

Content Tab > Menu Item > Content

Here you can choose what content the menu item should display.

Icon

If you select this option, a new toggle called Menu Item Image & Icon will appear in the design tab to style the icon width and color.

Text (default)

If you select this option, a new toggle called Menu Item Text will appear in the design tab to style the text font, color, size, etc.

Image

If you select this option, a new toggle called Menu Item Image & Icon will appear in the design tab to style the image width.

Content Tab > Menu Item > Image/Icon

This field is available if you selected Text in the Content field

You can choose here whether an image or icon should be displayed next to the menu item text.

Default is none and this field comes with responsive options, so you can display different content in different devices. You can even display the content for specific devices only!

If you select either an image or an Icon, a new toggle called Menu Item Image & Icon will appear in the design tab in order to style the image/icon.

Content Tab > Menu Item > Placement

This responsive field will allow you to choose whether the image or icon should be displayed at the left of the text (default), or should be placed either above the text, below the text or at thr right of the text.

Content Tab > Content > Link Type

Here you can choose the menu item behavior. That means, what should do the menu item on user interaction?

URL (default)

A URL should be open. You can enter the URL in the URL field*. Likewise, you can choose wheter the URL should be opened in the same tab.

* 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

Also, you can set the link relationship (rel attribute) in the Attributes toggle located in the Advanced tab.

Popup (Divi Layout)

The menu item will pop up a Divi Layout. You can choose the Divi Layout from the Layout select field.

Disclaimer: Divi messes up the styles when injecting a module inside the same module, as explained here. For this reason, we don’t show layouts that contain Nav Menu modules.

Popup (Custom)

The menu item will pop up custom content.

All the popup fields are documented here.

Sub (Divi Layout)

The menu item will display a sub menu that contains a Divi layout.

You can choose the Divi Layout from the Layout select field. Same as popups, Divi layouts that contain Nav Menu modules won’t be displayed in the select field.

All the common sub fields are documented here.

Sub (Custom)

The menu item will display a sub menu with custom content.

All the common sub fields are documented here.

Sub (WordPress Menu)

The menu item will display a sub menu that contains a WordPress menu.

All the common sub fields are documented here and the specific WordPress menu field here. 

Content Tab > Content > Enable Active Page

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

This applies to the WordPress menu items too. 

If you want a menu item to be active, you have to set a hover style to the menu item content (text, border or background, just to name a few). Then, while active, those hover styles will be applied. 

Sub Menu (Mega Menu)

These fields are available if you have selected one of these options in the Link Type select field:

The Sub (Divi Layout) option to display a Divi Layout.

The Sub (Custom) option to display custom content.

The Sub (WordPress Menu) option to display a WordPress Menu.

Whichever option you have selected, these fields will let you customize the sub menu or mega menu, which we will call Content from now on in this documentation.

If you have selected the Sub (WordPress Menu) you will be able to customize the WordPress Menu by using these fields.

Likewise, when displaying custom content, you will be able to add and style custom content to the sub by using these fields.

Content Tab >  Content > Preview in the Builder

Enable this helpful module field to temporary view how the content will be displayed in the front-end.

Content Tab >  Content > Display Behavior

This controls how the content will be displayed. These are the available options:

Hover

The content will be be displayed over the page elements when you hover over the Menu Item and will dissappear when hovering out the content. This is the default behavior.

Click

The content will be displayed over the page elements when you click the Menu Item and won’t dissappear until you click the Menu Item again.

Toggle

If you select this option, the content will be displayed inline (i.e. below the Menu Item and pushing down the page elements) when you click the Menu Item and won’t dissappear until you click the Menu Item again.

Of course, this field comes with responsive options, so you can set the desired behavior to each device.

Content Tab >  Content > Width

Here you will be able to choose the content width. Chances are that you want to increase the width when using either the Hover or the Click display.

This field is also responsive so that your content looks great on all devices.

Default is 240px when displaying either custom content or a WordPress Menu.

Content Tab >  Content > Offset

This responsive field will allow you to set the distance between the Menu Item and the content. Default is 15px.

Content Tab >  Content > Show Arrow

Enabling this field will display an arrow from the top center of the sub element pointing to the Menu Item. This field is responsive, so that you can choose where to show the arrow.

Content Tab >  Content > Arrow Offset

This field is available if the sub is displaying an arrow and it will allow you yo move the arrow horizontally from the top left to the top right.

Default is 50% (the arrow will be displayed in the top center).

You may want to use this field when you are aligning the sub to the left/right and you want the arrow to be pointing to the Menu Item.

This field comes with responsive options and you can use pixels here to keep the arrow below the Menu Item.

Content Tab >  Content > Open URL

This will allow you to open the URL inserted in the URL field (if any) when clicking the Menu Item.

If the URL field is empty, clicking the Menu Item will open and close the content.

Content Tab >  Content > Use Toggle Icon

This will add a toggle icon to the Menu Item so you can show and hide the content.

Clicking this icon will always toggle the content.

If you enable this field, a new field will appear to choose a custom icon. Additionally, new fields will appear in the design tab to style the toggle icon color, size and padding. You will also be able to use the Offset field to set the distance between the toggle icon and the Menu Item content.

Design Tab > Content > Alignment

Here you can choose the aligment of the sub menu. Default is center. 

The justified or fullwidth option (the last one) will force the sub menu to take up all the screen width.

Design Tab > Content > Background Color

Here you can define a custom color for either all devices or specific devices only.

Design Tab > Content > Arrow Color & Width

These responsive fields will be available when the sub is displaying an arrow and they will allow you to style the color and the width.

Design Tab > Content > Padding

You can use this field to change the sub padding. For example, you can use this field to remove the default WordPress Menu padding. Likewise, you can increase or decrease the padding when using custom content, etc.

Advanced Tab > Custom CSS > Content

Want additional customization for the sub element? If so, you can enter custom CSS here.

WordPress Menu

Apart from the common sub menu fields, new fields will appear if you have selected the Sub (WordPress Menu) option in the Link Type select field.

Content Tab > Content > Collapsible

Here you can choose whether the sublevels should be collapsed or not. If enabled, the Collapse Icon field will be available so you can set both a close icon (desktop value, default arrow down) and an open icon (hover value).

Content Tab > Content > Accordion

This field will collapse previously opened submenus when a submenu from the same sublevel is opened. That is, this will create an accordion effect.

Design Tab > WordPress Menu

This toggle offers you the following fields to style the WordPress menu items.

The Menu Item background will allow you to set a custom background color for all the WordPress Menu Items.

Next, you will able to set the font, font style, text color, text size, letter spacing and line height for all the WordPress Menu Items

The Menu Item Padding will allow you to set custom paddings (top / bottom / left / right) for all the WordPress Menu Items.

Finally, the Inner Level Padding will allow you to also set custom paddings, but for the menu items that are children of another menu items only.

Likewise, you will able to set the font, font style, text color, text size, letter spacing and line height for all the WordPress Menu Items.

Advanced Tab > Custom CSS > WordPress Menu Item

Want to add more styles to the WordPress menu items? Enter your additional CSS here.

Advanced Tab > Custom CSS > WordPress Sub Menu Item

Want to add more styles to the WordPress menu items that are in a sublevel? Enter your additional CSS here.

Advanced Tab > Custom CSS > WordPress Collapse Icon

Want to add more styles to the collapse icon that is displayed beside the WordPress Menu Item? Enter your additional CSS here.

For example, you may want to use the padding property to increase the icon clickable area. You can also use the color property to change the color (by default, the collapse icon inherits the Menu Item text color).

Popup

These fields are available if you have selected any of the Popup options in the Link Type select field and will let you customize the popup.

Likewise, if you selected Popup (custom), you will be able to add and style the custom content of the popup by using these fields.

Content Tab >  Content > Preview in the Builder

Enable this helpful module field to temporary view how the popup will be displayed in the front-end.

We recommend that you disable this field after previewing/editing the popup, so the popup does not distract you while editing other elements of your website.

Content Tab >  Content > Show On Hover

If enabled, the popup will be triggered when the user hovers over the menu item.

Content Tab >  Content > Show Close Icon

Want to show a close icon to dismiss the popup? If so, enable this field. A new field will appear that will allow you to change the default close icon.

Content Tab >  Content > Close On Icon Click Only

If you enable this option. The user won’t be able to close the popup by clicking ouside it. Also, the cursor will change from a cross to the default one.

This field is responsive, so you can have different close behaviors in different devices.

Please, remember that the user will always be able to close the popup by pressing the ESC key.

Content Tab > Content > Disable Page Scroll

This toggle field will prevent the user to scroll the page while the popup is open.

Design Tab >  Content > Location

This responsive field will allow you choose the popup location.

You can place the popup in nine screen positions: top-left, top-center, top-right, left-center, center, right-center, bottom-left, bottom-center and bottom-right.

Since this field is responsive, you can choose different locations for different devices.

Design Tab >  Content > Popup Max Width

Here you can change the maximum width that the popup content should take up.

For example, if you content takes up all the screen width, you might want to decrease the popup width by entering a value here.

Default is 80% and you can set different maximum width values to different devices.

Learn more about this field and see some examples in the Popup Link Type documentation that is based in DiviMenus, but explains common popup fields that you will find in DonDivi modules that offers popups.

Design Tab >  Content > Popup Max Height

You can change the popup maximum height as well. Default is 80% and you can set different maximum heights to different devices.

Design Tab > Content > Background Color

This responsive field will allow you to set a background color to the popup. This is more useful when using content popups, but you can use it in layout popups as well.

Design Tab > Content > Overlay Color

Here you can change the color of the page content around the popup. This field is responsive as well, meaning that you can have different colors for different devices.

Design Tab > Content > Close Icon Color and Width

These two responsive fields are available if you are showing a close icon and will let you change the icon color and width styles.

Design Tab > Content > Border and Padding

These fields are available if you selected the Content Popup option in the Link Type field.

You can here add a custom border to the content popup, as well as set the border radius and the content popup padding.

Design Tab > Content > Text Alignment

This responsive field, available if you selected the Content Popup option in the Link Type field, controls how the text is aligned within the popup.

Custom Content

These fields are available if you have selected either the Sub (Custom) option or the Popup (custom) option in the Link Type field and will allow you to add and style the tooltip or popup (we’ll call them Content from now on) custom content.

Content Tab >  Content > Image/Icon

You can choose here whether an image or icon should be displayed in your content.

Default is none and this field comes with responsive options, so you can display different content in different devices. You can even display the content for specific devices only!

If you select either an image or an Icon, a new toggle called Content Image & Icon will appear in the Design tab (which we will document later).

Content Tab > Title

This field, that comes with responsive options too, will allow you to display a title to your content.

The responsive options will let you choose different titles for different devices. You can even choose which devices should display a title!

Also, you can enter a URL in the Title Link URL field in case you want the title opens a destination URL. You will be able to also choose whether the URL should be opened in the same tab or not.

Content Tab > Body

Here you can add the main content. This field offers responsive options too, which is very cool and helpful when it comes to tooltips.

You can even choose which devices should display the body!

Content Tab > Button

Add a text here if you want to display a button. This will be the button text.

This field, same as all the custom content fields, comes also with responsive options. Meaning that you can choose different content for different devices. You can even choose which devices should display a button!

Note: You need to enter a URL in the Button Link URL field so that the button is displayed.

Design Tab > Image & Icon > Icon Color

This responsive field will allow you to set a custom color for the icon.

Design Tab > Image & Icon > Image/Icon Width

This responsive field will allow you to set a custom size for the image or icon. Default is 50px if you selected an icon and auto in case you are displaying an image.

Design Tab > Image & Icon > Image/Icon Placement

This responsive field will allow you to choose whether the image or icon should be displayed above the tile, body and button (default) or should be placed at the left.

Design Tab > Image & Icon > Image/Icon Alignment

This field will align your image or icon to the left, right or center when you are displaying the image or icon above your content. Otherwise, it will vertically align the image or icon.

This field, same as all the custom content fields, comes with responsive options.

Design Tab > Image & Icon > Image/Icon Offset

This responsive field will allow you to set the distance between the image (or icon) and the content (title, body and button).

The default offset is 20px.

Design Tab > Image & Icon > Image/Icon Margin & Padding

Finally, you can add some padding or margin to the icon or image.

Design Tab > Content Text

These fields will allow you to style the title and the body text. For the title you can choose the heading level.

For both of them (title and body) you will be able to style the font, font size, font color, letter spacing, etc.

Design Tab > Content Button

These toggle fields will allow you use custom styles for the button and will let you to align it to the left, right or center of your content.

Advanced Tab > Custom CSS > Content Image/Icon

Need further customization for the image (or icon)? Enter your custom CSS here.

Advanced Tab > Custom CSS > Content Title

Here you can enter additional CSS for the title.

Advanced Tab > Custom CSS > Content Body

Finally, you can enter additional CSS for the body as well.

Shopping Cart

The shopping cart fields will appear in the Menu Item settings modal if either WooCommerce or Easy Digital Downloads is installed and activated.

If so, a new toggle called Shopping Cart will appear in the content tab to add the cart functionality and a toggle called Shopping Cart will appear in the cesign tab to style the cart quantity.

Note: this new toggle will be available for icon and images items only.

Content Tab > Shopping Cart > Is Shopping Cart

Enabling this field will take the user to the cart page on Menu Item click, regardless the URL that you have introduced in the URL field.

Reminder: If the Menu Item is displaying a sub menu, you can use a toggle icon (Content Tab > Content > Use Toggle Icon) to open and close the sub menu on click. This way, clicking the Menu Item will take you to the cart and clicking the toggle icon will open and close the sub menu.

Content Tab > Shopping Cart > eCommerce Platform

This will let you choose which shopping cart you want to use.

Default is WooCommerce.

Content Tab > Shopping Cart > Show Cart Quantity

This will show the cart item count. If you enable this option, a badge (the red badge from now on) will appear over the Menu Item with the cart item count in it.

The cart item count will be automatically updated when updating the cart. No page reloads will be necessary.

This feature is compatible with the Visual Builder, so you can preview and style the red badge. Since we are previewing there, the cart item count will be zero and it will change to the actual value in the front-end.

Content Tab > Shopping Cart > Show Zero Value

Here you can choose whether the red badge should be displayed when the cart is empty.

Design Tab > Shopping Cart

Animation

You will be able to add transition animations to the mobile menu, sub element and popup.

In order to add an animation, we offer the DonDivi custom effects in this module.

Now, let’s cover the mobile menu animation fields. They will be available if you have enabled the mobile menu.

Design Tab > Mobile Menu > Enter Effect

You can choose an effect here. This effect will be applied to the mobile menu when it appears. 

Default is none.

See all effects later in this section

Design Tab > Mobile Menu > Enter Effect Animation Intensity

Here you can choose how subtle or aggressive your enter effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Design Tab > Mobile Menu > Opacity

You can add opacity to the selected effect.

Note: this will not be aplicable if you have selected the fade effect for obvious reasons (the fade effects animate the opacity).

If you enable this field, a new field will appear called Opacity Intensity, where you will be able to choose how suble or aggresive the opacity will be. Default is 100%.

Design Tab > Mobile Menu > Duration

Finally, you can set the effect duration in miliseconds. Default is 1000ms.

Now, let’s go over again all the effects. This time, they will be applied to the content (sub element or popup). These fields will be available if you selected any of the sub or popup options in the Link Type select field.

Menu Item > Design Tab > Content Animation > Enter Effect

You can choose an enter effect here. In other words, you will be able to animate the content when it appears.

Default is none, meaning that no DonDivi effect will be applied.

These are the available enter effects for this module:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Note: if the content is a sub element, animations other than fade, slide up or slide down might now work when the sub element is center alignment, so we recommend that you use the fade or slide up/down effects when displaying a sub element. 

Menu Item > Design Tab > Content Animation > Enter Effect Animation Intensity

Here you can choose how subtle or aggressive your enter effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Menu Item > Design Tab > Content Animation > Exit Effect

You can choose an exit effect here. In other words, you will be able to animate the card when it disappears.

Default is none, meaning that no DonDivi effect will be applied.

If you don’t select a DonDivi effect, no animation will run at all.

These are the available exit effects for this module:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Menu Item > Design Tab > Content Animation > Exit Effect Animation Intensity

Here you can choose how subtle or aggressive your exit effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Menu Item > Design Tab > Content Animation > Opacity

You can add opacity to the selected effect.

Note: this will not be aplicable if you have selected the fade effect for obvious reasons (the fade effects animate the opacity).

If you enable this field, a new field will appear called Opacity Intensity, where you will be able to choose how suble or aggresive the opacity will be. Default is 100%.

Menu Item > Design Tab > Content Animation > Duration

Finally, you can set the effect duration in miliseconds. Default is 1000ms.