Creating a dropdown WordPress Menu

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

Do It Yourself!


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

For that purpose, please reproduce the following steps.

Add a menu to WordPress

Go to the menus page (WordPress Admin Menu >  Appearance > Menus) and create the menu that you want to display later.

Add a DiviMenu Flex to your page

Add a Menu Item

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

Next, customize the Menu Item content or leave it as is.

Change the Link Type to Sub

Now, you will be able to display dropdowns!

Change the Source to WordPress Menu

We want to display our previously created menu, not a Divi Layout (default option).

Select the WordPress menu

Customize the WordPress menu

We are following the default display behavior for dropdowns:

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

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

We are inheriting the Menu Item style, but you can also customize the WP menu style. We will add a tutorial about customizing WordPress menus soon.

🥳 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 menu.

In this ense, you wil be able to set the dropdown width, add an arrow pointing to the dropdown, 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 dropdowns 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