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 .
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]
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.
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".
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]
That's all for this tutorial, I hope it will allow you to create a mega menu on Divi with ease.