Mega menus allow users to see more links in one go without having to scroll, hover and remember the contents from your menu. The best way to think about mega menus is that they are drop-down menus within drop-down menus.
So instead of your normal drop-down menu which shows a submenu when you hover over your main parent links in your navigation bar, a mega menu allows you to have additional parent links and submenus in 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.
Create an additional link to serve as a mega-menu 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.
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 additional configuration options. Find the text box titled CSS Classes and enter the "mega-menu" class.
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.
That's all for this tutorial, I hope it will allow you to create a mega menu on Divi with ease.
