DonDivi Nav Menu
This module is included in the DonDivi Builder plugin.
If you have already installed the builder, you can skip the installation section and start using the module.
Installation
Overview
The DonDivi Nav Menu module lets you place a navigation menu anywhere on your website. Beautifully.
The Menu Items will not only open destination links, but also will open sub menus and popups.
The Nav menu module comes with the DonDivi effects, so you will be able to use enter and exit smooth transition animations.
Also, this module is integrated with the WooCommerce and the Easy Digital Downloads shopping carts.
Overall, this is a module that offers you a menu with cool features that will look great on all devices.
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.
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
Here you can customize the red badge background color, font style, text color, text size and text shadow.
Advanced > Custom CSS > Cart Quantity
Additionally, you can enter here some custom CSS that will be applied to the badge that displays the cart quantity.
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.