Sub Link Type

Available in:

• DiviMenus Flex module

Overview

This Link Type allows you to show either a Divi Layout or a WordPress menu that will be part of the element where this Link type has been set (e.g. Menu items in DiviMenus Flex).

This opens up a lot of possibilities related to submenus! Therefore, this is the preferred Link Type when it comes to show either sub elements, dropdowns menus or 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 dropdown.

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 layout (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.

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 DiviMenu’ Menu Item style and the menu width is 240px.

We will show you how to customize both the menu width and the menu style later in this documentation.

Sub behavior

The display behavior will depend on the DiviMenu orientation:

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

Please hover over these example Menu Items to see this behavior in action:

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 remain visible.

Content > Link > Sub Width

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

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

For the Divi Libray dropdown (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 introdues 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. 

Design > Sub> Alignment

Here you can choose the aligment of the element.

CENTER

LEFT

RIGHT

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 > Show Arrow

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

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

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.

Design > Sub> Arrow Color

Here you can set a custom color for the arrow.

This field will 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.

Content > Link > Open URL

This field will allow you to open the URL introduced in the URL field rather than showing a sub element (submenu / dropdown) when clicking the item.

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

Let’s update our example to open the DiviMenus Flex documentation on item click.

Sub Style

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

If you are using WordPress menus you will be able to style them from the DiviMenus 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.

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.

DonDivi Layouts

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

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

Youtube

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