How to Create Divi Mega Menu without Plugin?

Creating Mega Menus in Divi becomes easier with third-party plugins like DiviFlash mega menu due to their extensive features.

However, if you prefer not to add extra divi mega menu plugins or spend more money, Divi has built-in tools that let you make functional mega menus without any plugin dependency.

In this guide, we will show you how to create a Divi Mega Menu without plugins. 

Step 1: Build the Menu Structure

To make a mega menu in Divi, first set up your menu in WordPress. You can add any items you want, just make sure they are in the right order. 

Go to your WordPress dashboard and click on Appearance, then Menus. Here, you can either make a new menu or modify an existing one.

For the parts of your menu that you want to turn into a mega menu, place the sub-item directly under the main item. This setup shows the order and relationship between items in your mega menu.

In our example, we will add three sub-items as Submenus under the parent menu.

Step 2: Call the Menu In the Front End 

We have set up the basic structure for our Divi Mega Menu. To display it on your website, you’ll need to add it to the menu module in the Divi visual builder. 

First, add a new section to your page, then insert the default Menu module. In that module, choose the Mega Menu we just created. Don’t forget to save your changes.

This is how our Mega menu will look in the front end for now,

Step 3: Assign the Mega Menu CSS Class

To transform a regular menu into a mega menu, you first need to add a specific CSS class “mega-menu” to the menu item you want to expand. 

Make sure the option for “CSS Classes” is enabled in your WordPress dashboard. You can find this option by clicking on “Screen Options” at the top right corner of your admin screen.

Here’s how to do it step by step:

• Click on the parent menu item that will become your mega menu.
• Find the “CSS Classes (optional)” field and type “mega-menu” into this field. Doing so tells Divi to apply a mega menu style to this menu item and its sub-items.
• Finally, save your menu after adding the class.

Let’s see how our Mega Menu looks now after adding the “mega-menu” CSS class.

Step 4: Include More Items in the Submenu

Let’s continue by adding more “Menu Items” under each “Submenu”. Feel free to add as many as you wish. 

In our example, we added two under each column.  Here’s what our final Divi mega menu structure will look like,

Step 5: Customize the Mega Menu Appearance

This method creates a basic mega menu with limited customization compared to using a mega menu plugin.

For more advanced mega menu features and functionalities (like dropdowns within mega menu columns) you can use the default mega menu module settings.

You can change how it looks by adding your own CSS code also. This might sound technical, but don’t worry—we’ve got some code snippets for you to use or modify as needed.

Here’s some CSS code to help you:

• Change the submenu font color to green.
• Make the submenu text unclickable and add an underline.
• Remove the default padding and increase the font weight to make the text stand out.

Just copy and paste this code to get started. You can adjust it to fit what you’re looking for.

.submenu-title #menu-mega-menu li.mega-menu>ul>li>a:first-child {
    padding-top: 0! important;
    font-weight: 700;    
	border-bottom: 1px solid black;
	width: 70% !important;
}
#menu-mega-menu .sub-menu li.submenu-title a{
    color: green! important;
    cursor: default;
    pointer-events: none;
}
#menu-mega-menu li.mega-menu>ul>li {
    width: 30% !important;
	margin-right: 3% !important;
}

The below CSS code will help you style each menu item, 

You can make it clickable, adjust the font size, and set the space between items. You can also change the font color, size, and weight to make items stand out. Additionally, you can specify their alignment and manage the spacing.

#menu-mega-menu .sub-menu li.submenu-title ul.sub-menu li a{
    color: #909090 !important;
    font-weight: 300! important;
    cursor: pointer;
    pointer-events: visible;
    font-size: 15px!important;
}
#menu-mega-menu li.mega-menu>ul>li>ul>li {
    width: 100%;
    margin: 0;
}
#menu-mega-menu li.mega-menu ul li {
    margin: 0;
    float: left! important;
    display: block! important;
    padding: 0! important;
}

Where to Add These CSS Codes? 

To add the CSS code, go to your WordPress Dashboard > Divi > Theme Options > General.

Find the Custom CSS and paste your code there.

Preview the Mega Menu

Here’s how our Divi mega menu looks finally,

Set the Mega Menu as Your Default Menu

Now that we’ve created our Mega Menu, let’s set it as the default menu using the Divi Theme Builder.

First, copy the menu section by clicking on the section settings. Then, head to Divi > Theme Builder and select Add Global Header. Choose the option to Build Global Header from the Default Website Template.

Next, paste the menu section just like we copied it. If there are any extra sections, delete them. Finally, click on the Save button at the bottom right corner.

To finish, click on the Save Changes button on the theme builder page, and we’re all set!

Conclusion

By following these steps, you can create a Divi Mega Menu without plugins. You can further refine the look and adjust the menu structure, content, and styling with custom CSS code to match your website’s design and requirements.

But for more advanced functionalities, we suggest using DiviFlash mega menu builder plugins designed specifically for Divi with lots of built-in control and features.

So, let your creativity shine and design a mega menu that not only guides visitors but also draws them into exploring more of your website!

If you have any questions or run into problems, feel free to leave a comment below. We’re here to assist you.