How to Create Mega Menu in Divi?

In Divi, you can create a basic mega menu using the Menu module, but it has its style limitations and also needs to add custom CSS.

But you can enhance it with DiviFlash Mega Menu Builder for extra features. It allows you to create a responsive mega menu with a lot of design options.

In this article, we will show you how to create a mega menu in Divi and design it as easily as possible using DiviFlash’s mega menu builder. 

Let’s get started. 

Step 1: Install and Activate the DiviFlash Plugin

Creating a fully functional responsive mega menu is super easy with DiviFlash. Here’s how to get started:

• First, make sure you have the newest version of Divi installed.
• Then, buy and install the latest DiviFlash version (It includes 50+ other modules besides the Mega Menu.)

Step 2: Create a Menu Structure in the WordPress Dashboard

To create a mega menu in the WordPress dashboard, first, make a menu in WordPress with the items you want in the right order. Navigate to Appearance > Menus. Here, you can either make a new menu or modify an existing one. 

Now arrange your parent menu item and place sub-items under the main menu. In our example, we will add three sub-items as submenus under the parent menu and continue adding more menu items as needed.

Don’t forget to make your menu a primary menu from the menu setting just below the menu items we have built. 

Step 3: Edit the Menu with DiviFlash Menu Settings Options

Now that we’ve created our desired mega menu structure, let’s customize it using DiviFlash’s menu settings. These settings specifically apply to the DiviFlash Advanced Menu Module.

To begin, enable the DiviFlash setting from the top right corner.

Next, click on “Edit Menu” beside the Main menu (our mega menu) and enable the mega menu option from the settings. Now select the column from the dropdown option and set the width to normal. 

For proper shaping, we need to align Submenu1 to the left and Submenu2 to the right.

Here, you’ll find advanced options like layout, icons, images, tooltips, badge settings, and more.

The Icon and Image setting lets you add icons or images beside or before the menu item. Tooltips provide additional information when hovering over the menu. You can also enhance user engagement and highlight important menu elements with Badge settings.

In our example, we will edit the menu items under Submenu1. We will customize the Tooltip text and background color, and position it to the right.

For the second menu item under Submenu1, we will adjust the Badge settings, change the text, enable the arrow option, set the background color, and position it to the right.

That’s it! Let’s review the changes we’ve made so far.

Step 3: Design the Menu Using the DiviFlash Advanced Menu Module

It’s time to design the Mega menu using the DiviFlash Advanced Menu Module. To begin the design process, open a page or post and enable the visual builder. Then, add the Advanced Menu Module of DiviFlash. 

To keep the design simple we will only add or tweak some options like the logo and icon, set the alignment of every element, add a button, and apply some animations. 

After opening the module the first thing we have to do is to add new items. To our requirements, we just need a logo, menu, and button. There are a total of 8 types of items. 

Insert a Logo

First, navigate to the setting options for the logo item. we will use the content and design tabs solely for the logo. Then set the item position on the Desktop to the left and the item position on the Small Device to the Right. 

The position setting options set apart DiviFlash’s advanced menu from others. Here you can separately set the position of your menu item for Desktop or Mobile menu.

Finally, select your desired logo. You can either upload one or select from the Divi library. 

If you prefer a sticky logo, upload it separately, although we will skip this step in our example. Additional design options include disabling specific devices and accessing a full design tab for further adjustments.

Design the Menu

Creating the menu follows the same steps as we did for the logo. First, in the Content tab, set the item position for both Desktop and Small Devices to center. Then, choose exactly the menu we made earlier. 

The rest of the design choices are up to you. You can pick animations for sub menu reveal and menu item hovers, as well as adjust spacing and positioning to your preference.

Add a Button

Now to design the button we will set the position right, add a button text, and change the button background. We can also use a button icon, or URL and make any changes in terms of appearance from the design tab options. 

These will give us a basic structure of our mega menu. Let’s see how it looks now. 

Step 4: Set the Mega Menu as Your Default Mega Menu

After creating our Mega Menu it’s time to make it the default menu using Divi Theme Builder.

• First, copy the menu section from the settings. Then, go to Divi > Theme Builder, choose Add Global Header, and select Build Global Header from the Default Website Template.
• Paste the menu section, delete any extra sections, and save.
• Adjust the spacing by setting the top and bottom padding of the section and row to 0px.
• Finally, save changes in the theme builder, and we’re done!

Preview the Mega Menu

Wrapping Up

Mega menus are a great way to make your website’s navigation stylish and user-friendly. While Divi offers built-in options for creating a mega menu without a plugin, using the DiviFlash advanced menu module opens up more possibilities. 

Follow the steps mentioned above for the most convenient way to create a Divi Mega Menu as well as a WordPress menu.

If you have any questions or encounter issues, feel free to leave a comment below. We’re here to help!

Further Reading: Best Divi Mega Menu Plugins