WordPress plugin Divi Mega menus are a popular design element that can give your website a sleek boost while providing visitors with an extra layer of navigation. There are several ways to add mega-menus to Divi. One of the easiest methods I have used is through a third-party plugin called Divi Mega Pro.
WordPress plugin Divi Mega Pro makes it easy to create mega menus using Divi Builder. Each menu can be added to any element using a CSS class. This means that you can add a Divi layout to any link in the menu, but you can go even further and add them to any element of a Divi layout just by adding a CSS class.
Create a WordPress plugin Divi Mega Pro Mega Menu
The WordPress plugin Divi Mega Pro menu is added to the dashboard menu. Here you can enter your license key, see the menus you have created, and create a new menu. When you click to add a new menu, you will see an editor for the menu post type. The screen is simple, but a lot is going on here.
Editor – you can create the mega menu or tooltip using Divi Builder.
Mega Pro Background – you can select the background and font colors.
Show locations – choose all pages or name specific pages, then enter exceptions.
Mega Pro Animation – select an animation. Choose from the offset, offset, perspective, fade, or scale.
Mega Pro Triggers – add a trigger as a CSS selector. Once you save it, you will see the CSS class that you are going to paste into the CSS Class field of a menu item, module, row, or section. This is what is clicked or hovered over to display the menu. Everything can be used as a trigger and not just a menu item. This means that you can also use Divi Mega Pro to create popups or tooltips.
Mega Pro display settings: choose the display direction (up or down), enter the top and bottom margins in pixels, choose a percentage of width and activate an arrow. Activating the arrow reveals more customizations where you can choose the type of arrow (triangle or round), choose the color, set the width and height, and preview the arrow.
Close button customizations: activate the close button on desktop or mobile and customize the close button. If you enable it, customizations for text color, background color, font size, border radius, fill, and display are previewed.
Additional Mega Pro Settings – choose trigger type (hovered or clicked), output type (hovered or clicked), and enter the exit delay.
WordPress plugin Divi Mega Pro models
The developer has provided several models for the WordPress plugin Divi Mega Pro. When you purchase the plugin, these templates are available in your account, in the Plugin Layout Templates tab. These are great for helping you get started designing your mega menus. I’ll use a few in my examples.
WordPress plugin Divi Mega Pro menu
Once you create a mega menu, it will appear in the list. Here you can edit, quickly edit or delete the menus. You can also search, filter by date, view by status, etc. It also provides the unique Mega Pro class so you can copy them from here instead of opening each one to get the class.
When you copy the class, be sure to paste it without any extra spaces. Otherwise, all of the mega menus on the page will no longer work.
I’m sure it wouldn’t be easy to add, but a copy and edit feature would be handy. You can save the Divi layouts to your library for reuse, but that doesn’t include the surrounding settings.
Adding a trigger
In the Mega Pro Triggers field, you will see a single Mega Pro class. Copy and paste it into the CSS Class field of the item you want to use as a trigger.
To add the CSS Class field to a menu item, you need to enable CSS classes. From the menu screen, select Screen Options and activate CSS Classes.
Paste the CSS class into the menu field. Now this menu item will display the mega menu on hover and take you to the page on click.
You will notice that the WordPress plugin Divi Mega Pro is also an option in the menu link options. They’re great for adding a menu item to the menu that isn’t going anywhere. Add the CSS class like any other menu item.
Contact section on the WordPress plugin Divi mega menu
The menu opens in hover. I can always click the Contact link to open the contact page if I want to. If I just wanted the mega menu to show, I could just use the Contact main menu link and rename it (like in the example above).
In this one, I changed the colors slightly using the background and display settings rather than using Divi Builder. It adds a bar at the bottom of the menu.
A simple call to action with menu columns
This is one of the models that add multiple columns. I make adjustments to the background and font colors. I also added an arrow and made the width 75%.
The background color and font options add a bit more to make it stand out. I left the default alignment, which puts the menu to the right of the screen. You can adjust the positioning in the settings.
The tabbed template includes a code module with jQuery to create the hover effect.
I added content to the tabs and adapted them to the site. Each of the links on the left shows a different tab in most of the menu.
Info Bubbles configurations
For this one, I added the CSS class to some blurb so that it opens a little pop-up on hover. The popup is just an image with a shadow below.
In the image above my mouse is hovering over the words LIVE WEBSITE. I haven’t adjusted the positioning yet, but it’s easy to make it appear anywhere you want.
For this one, I created a popup to show an image with some text. I set the display direction to Low and, to make it appear next to the image I want to add to, I added a margin of -300.
The pop-up now appears to the left and top of the image when I hover over it. I added transparent background color, border color, fill, and rounded outline.
License and documentation
You have the choice between four licenses:
- Single site – $ 15 per year
- Three sites – $ 29 per year
- Unlimited sites – $ 59 per year
- Unlimited Lifetime – $ 129 one time
For website maintenance service contact us.