Wednesday, April 1, 2020

How to create a Divi Mega Menu

The Mega Menus with Divi are an excellent idea to show the user more links and simplify the site navigability. A Divi Mega Menu will also enhance user experience and give a more trustworthy feeling to visitors.

Some users may think that showing everything at once reduces the time the user spends or is bad enough for SEO and site speed. But I personally believe that if you use the power of mega menus responsibly, this can provide an excellent user experience and improve page views-user rate.

Get your Divi Mega Menu with plugin

QuadMenu is a plugin that facilitates the creation of the Mega Menu in Divi. It offers Mega Menus mobile version, horizontal or vertical and different menu themes. You can buy it for free or in its two paid modes, a pro version of 18 dollars and a developer version with an extended license for 50 dollars.

This plugin was developed with the idea of mobile first and is aimed at maximizing the user experience on touchscreens.

This mega menu has been designed for both regular users and developers. The menu has a simple and intuitive interface, integrated into the Divi customizer dashboard, allowing you to create and customize an unlimited amount of mega menus and tabs menus without any programming skills.

For developers who want to fully customize the plugin, QuadMenu offers additional tools to integrate the menu into your theme, like advanced configuration options and hooks or custom CSS field.

Divi Mega Menu – QuadMenu

QuadMenu has been designed to integrate seamlessly Divi. Includes a native support for the Divi customizer dashboard, allowing you to customize the menu style from the native Divi settings.

Create the Divi Mega Menu without plugin

Recommendation: Have all the menus that you want to elaborate on hand. Write it down in a notebook, some document, whatever you want. You will gain time by knowing exactly what you want to add.

The first step is the menu, from which you will derive submenus and then three more submenus.

Let’s begin!

Access the WordPress Administrator. Click on Appearance and then Menus. Then create a menu called Mega Menu.

If you have the CSS Classes view active, skip to the next step. If you do not have it active, click on the top part of the Administrator, click on Screen Options and check the CSS Class checkbox. This is to create a CSS Class to customize the style of the menu.

In the menu on the left, click on Personalize links. In URL type # because you are testing. When you want it to be active remember to place the URL.

In Text of the link, type Mega menu and click on Add to menu. Display the custom link tab (called Menu structure) and you’ll see the CSS Class field. There we will write mega-menu so that Divi recognizes this class as a Mega Menu and behaves in that way.

This process is repeated with the rest of the links. Remember that you will not put any CSS Class for the moment. In each line of Text of the link, you put the title of that menu, so that you have a guide.

How to adjust the sub-menus?

When you have created all the links, start to drag the submenus to the corresponding menus. In the end, it will be as in the initial image of this post. Remember to replace the # with the URLs of each page and save the menu.

To see it on the page you have two options:

1. Create a full-width Menu module in a full-width section and add the one you created.

2. Click on Appearance, then on Menus in the Menu Options section and do it Main menú.

How to modify the design of the header texts in the Mega Menu?

With this code, we can modify the design of the header texts (color and thickness) and the line that appears below these texts. Remember that what we are going to see is only valid if you are using the Divi template.
Add the following code to the style.css file of your child theme:

Customize the design with the following criteria:

Font-weight: Here you can modify the thickness of the header text. Take into account: the possible values are 100,200,300,400,500,600,700,800, 900.

Color: HTML text of the header text.

Border-bottom: line that appears under the header text. The thickness corresponds to the first data that appears, in the example 3px.

Do you like Mega Menus? Did you install the Divi Mega Menu manually or with a plugin? Tell us!

¿Want to learn more about Divi? Meet the Divi visual builder here.

Leave a Reply