Skip to Main Content

How to create a mega menus on Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Mega menus allow users to see more links at one time without having to scroll, hover and remember the contents of your menu. The best way to understand the mega menu is that it is drop-down menus in drop-down menus.

So, instead of your normal drop-down menu that displays a submenu when you hover over your main parent links in your navigation bar, a mega menu allows you to have additional links and sub-menus from the drop-down menu.

How to add a mega menu to your navigation bar

Log in to your WordPress dashboard and navigate to Appearances> Menus .

wordpress menu divi.png

Create a menu with four parent links with each of the parent links having their own submenu links. In the example below, I add three submenu items under each of the four parent menu links.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

menu divi.png

Create an additional link to serve as a megamen link. For the example below, I call this link "Main". Then drag the two parent menu links (each with their submenu links) under the Main link.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Now, to create your Megamenu, you need to add a special CSS class to the top level main link called "Main". You can do this by clicking on the screen options link at the top of your page and making sure the CSS class option is checked.

css classes divi.png

Finally, you need to add a CSS class to the "Main" link you just created. Click the arrow to the right of the "Main" menu item to toggle the additional configuration options. Find the text box labeled CSS Classes and enter the class "mega-menu".

mega menu divi.png

Now, when you reload your page, you can see that all the previous menus have been placed in the giant menu under this link, the Mega Menu.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

mega menu divi example.png

That's all for this tutorial, I hope it will allow you to create a mega menu on Divi with ease.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top