Overview

This Link Type allows you to add either a Divi Layout or a WordPress menu as part of the element where this Link Type has been set. That means that you will be able to display sub elements when clicking or hovering over the main element (Menu Item).

This opens up a lot of possibilities related to sub menus! Therefore, this is the preferred Link Type when it comes to display dropdowns menus and mega menus.

You should be familiar with this way of displaying submenus since the Elegant Themes main menu follows this approach as you can see in the Elegant Themes menu that we have recreated using the Sub Link Type.

How the Sub Link Type works?

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

First, you have to select the Sub option from the Link Type select.

If you are using the DiviMenus Flex module you must first enter the Menu Item that will show the submenu and open the Link module toggle.

Once you have selected the Sub Link type option for an item, you will be able to show the submenu by setting the following module fields:

Content > Sub Source

Choose the Divi Library option if you want to display a Divi Layout as a dropdown menu (you can use this option to display a mega menu).

Choose the WordPress Menu option if you want to display a WordPres menu as a dropdown menu (you can see an example here).

Content > Divi Library

Here you can select the Divi Library layout that you want to show as part of the item.

In the examples below we will use a row layout with several blurbs.

Content > WordPress Menu

Here you can select the WordPress menu  that you want to show as part of the item.

You can see all the available WordPress menus in the WordPress Admin Page > Appearance > menus.

We have created for this documentation the following example menu.

This WordPress menu has four menu items. One of the menu items will contain a submenu with three menu items.

By default the WordPress menu inherits the Menu Item style and the menu width is 240px.

We will show you how to customize both the WordPress menu width and the WordPress menu style later in this 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 dropdown menus will look in the front-end and disable it afterwards (once you have finished editing it).

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

Content > Link > Use Custom Display

This module field will allow us to customize the default display behavior that we have explained above.

For example, you may want to display the sub element (sub menu) over the page elements on Menu Item hover when the DiviMenu orientation is vertical. If so, this module field comes to our rescue.

The custom display can be set in the Custom Display responsive module select field that will be available after enabling this field.

These are the display options we currently offer:

Over the page elements when hovering

If you select this option, the sub menu will be displayed over the page elements when you hover over the Menu Item and will dissappear when hovering out the sub menu.

This is probably the most common behavior when it comes to display sub menus and you should be familiar with it. That’s also why this is the default display for horizontal Divimenus.

Over the page elements when clicking

This is similar to the previous one, but the sub menu will be displayed over the page elements when you click the Menu Item and won’t dissappear until you click the Menu Item again.

Please click the Menu Items to see the difference with the horizontal DiviMenu above.

Inline when clicking

If you select this option, the sub menu 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.

This is default display for vertical DiviMenus.

Content > Link > Sub Width

You can set a custom width here and override either the Divi Library layout width or WordPress menu width.

If you haven’t set a width to your Divi Library Layout, the Sub will take the Menu Item width, so you will have to set a custom width here if you want the Sub to be wider than the Menu Item.

This field is responsive and we recommend that you use fixed units as pixels when displaying the dropdown (Sub) over the page content.

For the Divi Libray dropdown example (horizontal orientation), we haven’t introduced any values here since we have previously set the width in the Divi layout and that width worked for the purpose of this article, but we could have changed that width by entering another width values.

As for the WordPress menu dropdown (horizontal orientation), we haven’t introduced any values, since the 240px default width also worked for us.

We set a 100% width for tablet and mobile for both examples in vertical orientation so the dropdowns took up all the available space.

Content > Link > Sub Offset

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

Default is 10px.

Design > Sub> Alignment

Here you can choose the aligment of the element.

CENTER

LEFT

RIGHT

JUSTIFY (FULL WIDTH)

If you are displaying the dropdown over the page content, it will take up all the screen width (since its position is relative to the page).

This can be rather useful to display fullwidth mega menus!

On the other hand, if you are displaying the dropdown inline, it will take up all the Menu Item width (since its position is relative to the Menu Item).

Please note that the width will be adjusted automatically either to the screen width or the Menu Item width, so you won’t need to use the Sub Width field for that.

Content > Link > Collapsible

This field is available for WordPress menus only.

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).

If you have not set a URL for the WordPress Menu Item you will also be able to open and close the submenu by clicking the Menu Item. Since we have set a URL, we will have to click the collapse icon to open the submenu (clicking the Menu Item will open the URL).

Content > Link > Accordion

This field is available for collapsible WordPress menus only.

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

Content > Link > Show Arrow

Here you can choose whether an arrow should be displayed when displaying the Sub element over the page elemetns. If enabled, the Arrow Direction field will be available:

The Arrow Direction will allow you to change the arrow direction (upwards / downwards). If the arrow is upwards (default), 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.

We have set a box shadow to the WordPress menu for the sake of this example. We will show you how to style WordPress menus in the Sub Style chapter. In addition to that, we have also increased the WordPress menu offset to 20px for all devices.

Design > Sub> Arrow Color

Chances are that you may want to customize the arrow color. If so, you can use this module field.

This module field will only be available if the Show Arrow field is enabled.

The default color is #fff (white). Let us change the color for the WordPress menu example.

Sub Style

If you are using Divi layouts you won’t need any fields or previews here since you will be able to style the layout and see the final result in the Divi Library.

In case you are using WordPress menus, you will be able to style them from the Menu Item settings modal.

Design > Sub

We offer the following fields to override / style the WordPress Menu Items.

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

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

Sub Menu Item Padding will allow you to also set custom paddings, but only for the WordPress Menu Items that are displayed in submenus.

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.

Design > Box Shadow > WordPress Menu

This advanced field will allow you to set a box shadow for the WordPress Menu.

Design > Link > Enter Effect

This field will allow you to animate the sub element when appearing.

> Custom Effects

Design > Link > Exit Effect

This field will allow you to animate the sub element when disappearing.

> Custom Effects

Advanced > Custom CSS

The WordPress Menu field will allow you to set custom CSS for the WordPress Menu.

The WordPress Menu Item field will allow you to set custom CSS for all the WordPress Menu Items.

The WordPress Sub Menu Item field will allow you to set custom CSS for all the WordPress Sub Menu Items (Menu items that are inside a submenu).

Sub Link Type in action

Below, we are listing some resources that might be helpful for a better understanding of this Link Type.

Tutorials

Creating a Mega Menu: https://dondivi.com/documentation/creating-a-mega-menu/

DonDivi Layouts

SUB: https://dondivi.com/layouts/sub/

Working / Loading: https://dondivi.com/layouts/working-loading/

Elegant Themes: https://dondivi.com/layouts/elegant-themes/

YouTube

SUB Layout: https://www.youtube.com/watch?v=zeu2ouEucBE

Recreating the Elegant Themes menu: https://www.youtube.com/watch?v=LMluksCvvEg