How to Create a Mega Menu?
In this guide, we'll show you how you can easily make a Mega Menu using Supreme Mega Menu for Divi.
Last updated
In this guide, we'll show you how you can easily make a Mega Menu using Supreme Mega Menu for Divi.
Last updated
So first, we need to create the content for our Mega Menu in Divi Library, for that, simply go to Dashboard -> Divi -> Divi Library and here click on the Add New button at the top and give your Layout a Name and change the Layout type to "Layout".
Now you can start making your Mega Menu Layout from scratch or you can even download some beautiful mega menu layouts that we provide for free with the Mega Menu plugin, which you can download here.
For our example, we'll use one of the free mega menu layouts from the above link. Make sure your content width is 100% so that it looks good enough in the Mega Menu dropdown. This is how it looks in the Library:
Now that our content for the Dropdown is all set, we can now go ahead and make our Global Header using the Mega Menu Module. Simply go to Dashboard -> Divi -> Theme Builder and here create your Global Header.
Now, you'll be in the Divi Builder, simply add the Mega Menu Module here.
Now, firstly, you can add your site's log by going to the "Logo" Panel and setting up the Link for the Logo. You can style the Logo from the Design tab -> Logo If you need to.
Now the logo is set, you can start adding your Menu Item. For that simply click the + Icon in the "Content" tab.
Now, you'll see many new settings will open up which is called Menu Child/Item Settings. And here you can add your Menu Item text and choose the Divi Layout as the Dropdown that you just created.
You may also need to create simple Menu Items that don't show any dropdown, for that simply change the "Content Type" to Link, and then you can add the Link for this Menu Item in the Links Panel, see the below image for better understanding.
You can also show a WordPress Menu that you've created under Dashboard -> Appearance -> Menus, for that simply change the Content Type to "WordPress Menu" and select the Menu that you'd like to show.
Now you can start styling the Menu Items and your Dropdown to your liking, the styling of the module is very simple and just like you're editing any other Divi Module. You'll find many advanced settings to customize almost any part of the Menu Items and Dropdown to your liking.
You can also separately design your Menu Module to match your brand, you'll find 3 panels to style the Mobile Menu to your liking, see the below image:
That's it, that's how easily you can create a very beautiful looking Responsive Mega Menus in Divi using Supreme Mega Menu for Divi.