When it comes to better navigation, there is nothing that comes closer to mega menu. It offers quick access to all the pages on a website and improves user experience. 

Divi also offers a basic version of mega menu with limited styling and customization options. But what if you need more than just the basics?

That is where DiviFlash comes into play, with features like column choices, width options, the inclusion of images, icons, tooltips, Divi layout and more.

DiviFlash lets you break free from limits with its range of advanced settings and functionalities.

Stick to this guide to learn how to make mega menu in Divi and DiviFlash with ease.

Prerequisite (Must Follow)

There are some prerequisites that you must follow in order to create a mega menu with Divi and DiviFlash. They are: 

• Install the latest version of the Divi theme and builder (Create with Divi)
• Get DiviFlash and install it like all other WordPress plugins (With DiviFlash)

While you have the option to choose any of them, selecting DiviFlash is highly recommended due to its extensive styling and customization features. In this guide, we will demonstrate how to create a mega menu using both Divi and DiviFlash.

How to Create Mega Menu with Divi’s Built-in Mega Menu

Divi only lets you create a basic-level mega menu that you can style through Menu module. Let’s take a look at how to create a mega menu in the Divi theme:

Step One: Navigate to Menus

At first, log in to your WordPress dashboard and go to the “Menus” option from the “Appearances.” Select the display location, “Primary Menu” is the ideal place for the mega menu.

Step Two: Create the Mega Menu Structure

Now, create a new menu structure. By default, Divi allows you to add 4 columns, so we’ll add 4 parent menus with 3 submenus for each. Alongside the parent and submenu, we’ll also create a menu to link to the mega menu. Check out our example: 

Create a Menu to Link Mega Menu:

First, create the main menu named ‘Our Services’ to use for the mega menu

Add and Organize Parent & Submenus:

After that, add a parent menu with 3 submenus under the “Our Services” menu (remember to inset the parent and submenu accordingly)

Add More 3 Submenus for Each Parent Menus:

Finally, add 3 more parent menus with 3 submenus for each of them. Make sure to organize each parent and submenus following the previous step.

Note: We’ve used numerical labels for both parent menus and submenus for easy understanding. You can name them as desired.

Step Three:  Add a CSS Class

After creating the menu structure, it’s essential to add a CSS class. This step is necessary to enable and show the mega menu. We previously named the menu ‘Our Services’ for the mega menu; now, let’s apply the CSS class. Here’s the process:

Enable CSS Class:

Click on “Screen Options” from the top right corner of menu’s dashboard and tick on “CSS Classes”

Add CSS Class on Specific Parent Menu:

Click on the “Our services” and then add “mega-menu” on the CSS Classes option

See the Result & Style It with Menu Module

That’s it. Save the menu, then go to the page or post to see the result. Your mega menu should be activated. Now, use the Divi Menu module to further style and customize the mega menu. 

How to Create Divi Mega Menu with DiviFlash

While Divi itself only offers a few styling options, DiviFlash can open a new door of possibilities. It can help you create a more responsive mega menu with its powerful features and customization options. 

Check out the step-by-step guide below to learn how to set up a mega menu with DiviFlash:

Step One: Create a Menu in WordPress Dashboard

Go to the WordPress dashboard and create or edit your existing menu from the Appearance> Menus. We’ll create a new primary menu with a parent and submenus by following the section below:

Enable DiviFlash & Add Parent Menu: 

Enable the DiviFlash setting from the top and click on “Save Menu.” Start adding parent menus, and we’ll add 6 parent menus

Select Mega Menu Option and Add Submenu: 

Next, create a submenu, and we’ll add a submenu only for “Blog” and use it for the Mega menu. Each submenu will also have 3 more submenus.

Enable Mega Menu and Use Other Advanced Features:

Click on the “Edit Menu” option beside the “Blog” parent menu and enable the mega menu. We’ll use advanced options like tooltip and badge settings for DiviFlash and Divi Plus, which are submenus of Best Divi Plugin:

• Tooltip Settings: 

Tooltip provide additional information without overwhelming the user when hovering over a web page element. Tap on the “Edit Menu” option beside DiviFlash, and there you’ll find four tooltip options. Here is how we’re using the tooltip settings:

Tooltip Text: Most Popular

Tooltip Color: FEFEFE

Tooltip Background: 000000

Tooltip Position: Left

• Badge Settings: 

Coming up next, let’s explore the badge setting. Utilize badges to boost user engagement and highlight essential elements. DiviFlash’s badge setting provides four different options, which we’ll use for the Divi Plus submenu.

Bedge Text: Best for Customization

Enable Arrow: Toggle on

Badge Color: 2FFF00

Badge Background: 000000

Badge Position: Right

Note: Remember to click on “Save Menu” each time after creating a parent or submenu to get DiviFlash’s edit options.

Step Two: Select the Header Location from Theme Builder 

Divi lets you select header, body, and footer locations individually, and we’ll choose the global header option. Navigate to Divi, then Theme Builder from the WordPress dashboard, and click on the “Global Header’s” edit icon.

Step Three: Determining What to Add in the Header Section

We’re going to design our mega module to make it look attractive. Hence, we’ll follow the standard header design approach, which includes a logo, an organized menu, social media icons, and buttons.

Step Four: Design the Menu with the DiviFlash’ Advanced Menu Module

To begin the design process, open a page or post and enable the visual builder. We’ll customize the spacing option’s top and bottom padding of section and row. Input 0px for both top and bottom of section and row.

Then, module settings, and like every other Divi module, this one also comes with 3 broad categories:

• Content 
• Design
• Advanced

In the Content Tab

We will only use the first element on the Content Tab, which is “Add New Item,” to add a logo, an icon, and more:

• Click on the “+,” then add “Logo” from the “Type” option

• Again, click on “+” and add “Icon Box”
• Add two more icon boxes by duplicating the previous one
• Add a button from “Add New Item” > Type

So far, we’ve added 6 items and are now customizing them one by one. By clicking each item’s setting option, you’ll discover individual content, design, and an advanced tab for further customization. Here is how to use them:

Logo:

We’ll only utilize the content and design tab for the logo:

• Content:

Item Position on Desktop: Right

Item Position on Small Device: Right

Logo: Select your desired logo

• Design:

Sizing: 150px (max width)

Menu:

Applying animation and maintaining proper alignment of the menu are crucial. Here is how you can make an ideal menu design:

• Content:

Item Position on Desktop: Center

Item Position on Small Device: Left

Menu: If you have multiple menus created, select the right one

Submenu Reveal Animation: Animation 3

Menu Item Hover Animation: Enable Item Animation. (Menu Item Hover Animation – Animation 3) and (Line Color – #ff7e19)

Submenu Distance Desktop: 14px

Icon Box:
In total, there are three icon boxes we’ve added to link social media including Facebook, X, and LinkedIn. And here you’ll only need the content option for designing:

Item Position on Desktop: Right
Item Position on Small Device: Left (top row)
Select Icon: Search for LinkedIn icon
Icon Color: #000000 (Hover: #ff7e19)
Icon Size: 19px
Icon Box Link URL: Your LinkedIn ID link

Note: All three icon boxes require the same customization. Only change their icons; the first one is Facebook, the second is X, and the third is LinkedIn.

Button:

• Content:

Item Position on Desktop: Right

Item Position on Small Device: Left 

Button Text: Get Started

Disable On: Small devices

Background: #29dcab, (#ff7e19 for hover)

• Design:

Text Style: Body Font – Inter, Uppercase for Body Font Style

Body Text Color: #ffffff

Body Text Size: 15px

Spacing: Margin 15px (Left), Padding 10px (top & bottom), 15px (left & Right)

Border: Rounded Corners – 1px

In the Design Tab

In the design tab, we’ll only use the “Center Row Settings” option, as all menu items are center-row-based. Change “Padding” on top and button to 15px. Make your mega menu look great with other options, such as sizing, spacing, and box shadows.

In the Advanced Tab

We won’t use any elements in this tab since we can create beautiful mega menu designs without CSS classes.

Closing Thoughts

So, how to create mega menu in Divi?

Well, now it’s up to you. You can either use Divi to create a basic mega menu or go for DiviFlash to create a super functional one.

We would recommend you go for DiviFlash, as it offers advanced features and functions with countless customization options. DiviFlash’s mega menu is also fully responsive, mobile-friendly, and SEO-optimized.

Try DiviFlash if you’re serious about creating mega menus that will impress your visitors.