Plugins

DiviMenus

DiviMenus - $36.75

A powerful menu builder that brings the coolest designs and popups to Divi!

Floating DiviMenus

Floating - $6.75

Choose the Pages and the Location to float your DiviMenus!

Sharing DiviMenus

Sharing - $6.75

A DiviMenus add-on that brings the coolest Social Sharing buttons to Divi!

DiviMenus On Media

On Media - $6.75

Display DiviMenus on Images & Videos to add stunning Media options!

DiviSignatures

DiviSignatures - $14.25

Design Email Signatures with Divi and paste them into your Mail Settings!

DiviPasswords

DiviPasswords - $6.75

Password Protect sections, rows, columns and modules with Divi!

DonDivi

Layouts

Check these awesome layouts out. Already a DonDivi user? Download them from your account area!

Extra Tools

DonDivi plugins also include Exclusive Extra Tools to help you. Save money and forget additional plugins!

DonDivi

About us

We create premium tools for improving your creativity and simplifying the way to design stunning websites.

Special Bundle!

DiviMenus & Family

DiviMenus & Family - $69 ⚡

This stunning Bundle includes the DiviMenus plugin and its 3 new Add-ons:
Floating + Sharing + On Media.

Members

Log in

Access your downloads, layouts and support. If you have purchased at Elegant Themes > Register.

Documentation

Access all the detailed information about our plugins and get the most out of them!

FAQ & Support

Already a DonDivi user? Send us a ticket from your user area and we will reply as soon as possible.

Contact us

Creating a Mega Menu

How to use the Sub Link Type to display a Mega Menu

Do It Yourself!

 

In this tutorial we are going to use DiviMenus Flex to display a mega menu when the user hovers over a Menu Item.

For that purpose, please reproduce the following steps.

Design a Mega Menu in the Divi Library

First of all, you need to design the mega menu that you want to display later. In order to do that, you can add a new Divi Layout to the Divi Library and use Divi modules (Texts, Blurbs, Images, Social Media Follow, etc). For this tutorial we are going to display a section with several blurb modules.

Add a DiviMenu Flex to your page

We have used the Divi responsive options to change the DiviMenu orientation and the Menu Items width on tablet and phone devices. In addition to that, we have aligned the DiviMenu to the center and hidden the Menu Button as well.

Add a Menu Item

Click on Add New Menu Item and type Custom Width in the Title field.

For this example, we will be adding another Menu Item in order to display a fullwidth mega menu.

Next, customize the Menu Item content or leave it as is. We are placing an icon to the left of the Menu Item text, as well as changing the text and background color.

Change the Link Type to Sub

Now, we will be able to display dropdown menus!

Leave the Source field as Divi Layout

Select the Divi Layout

Customize the Mega Menu

We are following the default display behavior for both Custom Width and Fullwidth Menu Items:

If the DiviMenu orientation is horizontal, the mega menu will be displayed over the page elements when hovering over the Menu Item.

On the other hand, if the orientation is vertical, the mega menu will be displayed inline (like a toggle) when clicking the Menu Item.

For the Custom Width Menu Item we have set a 850 pixels width for desktop and 100% width for tablet and phone.

For the Fullwidth Menu Item we have changed the alignment to justify in order to force the mega menu to take up all the available width when displayed over the page elements.

🥳 That’s it!

Feel free to use all the Sub Link Type fields (please notice the Sub toggle in the Design Tab) to customize the mega menu.

Apart from setting the width and adding an arrow, you can change the display behavior by enabling the Use Custom Display toggle field, increase or decrease the dropdown offset, change the alignment and other customizations.

We will be adding tutorials on mega menus and other features every now and then. Please, check our website and subscribe to our YouTube channel for upcoming updates!

👉 Subscribe to our YouTube channel

More Videos