By using the built-in Divi Pixel feature, you can build a mega menu and display it in the navigation instead of the Divi native dropdown menu. Mega menus are very popular in web design today. They will be especially useful if your menu is complex and has many links, which would make navigating the page difficult if we used the standard menu dropdown.

In this tutorial, I’ll show you how to build and implement a mega menu on your Divi site. We will use the Divi Pixel Balloon module for this, which allows you to display info boxes, balloons and various tooltips when you hover the mouse over an element.

We also have a freebie for you. To speed things up, we’ve created mega menu layout that you can download, import into your Divi library, and use on your own website in no time.

Build Mega Menu layout using Divi Builder

The first thing we need to do is design our mega menu using the Divi builder. To use a previously designed layout, it must be in the Divi library. There are 2 ways to save a layout to the Divi library. We can save the layout from any page or just add a new layout directly in the Divi library.

For this tutorial, we’ll use the second d method. I’ll show you how to add a section, row or module to your Divi library, and then use it to create a mega menu on your Divi site.

Note: If you want to use our prebuilt Mega Menu Layout Pack, you can skip this step, and just import Mega Menu Layout Pack to your Divi Library.

1. In your WP Dashboard navigate to Divi → Divi Library
2. Click Add New button
3. In the modal window add Layout Name and select Layout Type. For most scenarios, a row will be fine, but if you need to build more complex mega menu layout, you can choose section.
4. Click Submit

1. Now only the sky is the limit. Design your own mega menu using the Divi builder module. For creating my demo layout, I have used 2 columns layout 2/3 + 1/3 and Divi Text and Blurb modules.
2. Once you are done, click the Save button to save your new mega menu layout.

Add Globar Header with Balloon module

In this step, we will add a global header using the Divi Theme Builder and configure our mega menu using the Divi Pixel Balloon module. For the header, we will use 1 column in which we will place the Divi Menu module. Then we’ll add the Balloon module below, and call the new mega menu layout that we have saved in the Divi library.

Add Global Header using Divi Theme Builder

1. In your WP Dashboard navigate to Divi → Theme Builder.
2. In the Default Website Template box, click Add Global Header and select the Build Global Header option.

1. Click Add New Row and select 1 column layout.
2. In the modal box search for Menu module and add it to your header layout.

Global Header Customization

Now that the Menu module is added, we can configure it. In the module options, you can add a logo, change the menu font, color, and change the menu alignment. There are more options out there, so browse them carefully to find a menu that suits your needs. I would like to mention the distances. By default, they won’t be consistent, because Divi adds some padding/margins to sections, rows and modules, so we need to tweak them to make our Divi Menu module perfectly centered in the header section.

 Below is my configuration:

1. In the Section settings, I added 0 for top and bottom padding
2. In Row settings, I set 20px bottom and top padding.
3. In Menu module settings I removed bottom padding by adding 0px.

Add Divi Pixel Ballon module to the header section

In this step, we’re going to add the Balloon module and customize it so it just looks good. By default, the Balloon module has 550px width, so we need to increase it. We will also remove some spacing, set the selector, position and animation.

1. Click Add New Module icon
2. Search for Balloon and add it below the Menu module
3. In Balloon module setting, add .dp-mega-menu to Selector field
4. Select Balloon Placement to Bottom
5. Choose Balloon Animation
6. In the Content Type dropdown select the Divi Library option
7. In Divi Library dropdown, select your saved Divi Library item

Balloon module Spacing and Sizing

1. In the Balloon settings go to Design → Sizing
2. Set your desired Balloon width. I added 1000px. Set max-width to 100%.
3. Go to Spacing toggle
4. Set Balloon Padding to 0 (optionally).
5. Save header layout and quit Divi Builder.

Add desktop and mobile menu

In this step, we will add and configure a menu so that it displays our mega menu when you hover the mouse overspecific menu item. To do this, we need to add a custom class to the menu item. I’m also not a fan of using the mega menu on mobile devices, so we’re going to add a new, simplified menu to display on tablets and phones and I will show you how to do that.

1. In your WP Dashboard navigate to Appearance → Menus
2. In Screen Options make sure you have CSS Classes enabled
3. Add dp-mega-menu class to the menu item you want to use for the mega menu dropdown
4. Click Save Menu button

Add new menu for mobile devices

Now we will create a new menu that we will be displayed on tablets and mobile devices.

1. In Appearance → Menus click create a new menu link.
2. In the Menu Name field enter the name for your mobile menu
3. Click Create Menu button

1. Choose Mobile Menu for editing and click the Select button.
2. Add pages you want to display in your mobile menu
3. Click Save Menu button

Add Mobile Menu to the Theme Builder Header

The last thing we need to do is add the mobile menu to our header and hide our desktop menu on mobile devices, and the mobile menu on desktop computers. To achieve that we will add a new row to our Theme Builder Header and apply visibility settings to hide rows on specific devices.

1. Navigate to Divi → Theme Builder
2. Click the Edit icon located in the Global Header button.

1. Add new Row below the Balloon module
2. Select 1 column layout
3. In the modal box type Menu and add Menu module to the new row

Select Menu for mobile devices and customize the spacing

In the new Menu module, we need to select a menu for mobile devices. We have created a separate menu for mobiles in the previous step, and now we need to choose this menu in the Menu module. We will also add 20px bottom and top padding for the Menu module, and tweak module paddings.

1. Select Mobile Menu in Menu selector field
2. Go to Design → Spacing and add 20px bottom and top padding
3. Save Menu module settings

Setup Visibility settings for rows

We are nearly there! In this last step, we need to adjust Visibility settings and remove the padding from the row with our mobile menu.

1. Open first row settings
2. Go to Advanced → Visibility and select Phone and Tablet checkboxes.
3. Open second row settings
4. Go to Design → Spacing and set 0px top and bottom padding
5. Got to Advanced → Visibility and select Desktop checkbox
6. Save layout and quit Theme Builder

Improve user experience with Balloon module

As you can see, the Divi Pixel Balloon module is a very versatile tool. You can not only build mega menus with it but also all kinds of prompts. The Divi Pixel Balloon module lets you build tooltips using the Divi Builder and trigger them on any element you want. This module uses the tippy.js library and is a complete solution for popovers and dropdowns. It comes with an optimized positioning engine for flipping and overflow prevention.

This is it! I hope you enjoy reading this tutorial. Adding a mega menu to your Divi website is a great idea and can help your visitors navigate your site. Whenever you use custom code or 3rd party plugins for mega menus, make sure that your menu is optimised for mobile devices.