How to add a Max Mega Menu in Divi?
If you are starting a website with Divi, you’ll quickly realize that the Divi Mega Menu feature is a bit lazy and don’t provide the necessary features to fit the actual standards.
There are some free mega menu plugins for WordPress that allows you to include this feature in your Divi theme site. And it’s not for self-promotion, but the best option is QuadMenu, as it has been developed to integrate with this theme and at least we recommend you to give it a try to the free version of QuadMenu for Divi.
Nevertheless, Max Mega Menu is a great mega menu plugin and what you are looking for in this tutorial. So, let’s get down to work and see how to integrate Max Mega Menu and Divi.
Why use the Max Mega Menu plugin?
- Fits any subject
- It has the “drag and drop” mode that replaces the menu system already installed.
- Visual constructor
- Apart from the previous function of drag and drop, it allows the addition of WordPress widgets to the mega menu.
- Unlimited levels of drop-down menus
- It ends with the limitation of some themes to show only one or two levels of menus.
- Customizable
- Max Mega Menu has more than 100 style options, without needing to know CSS.
- Compatible with multiple menus
- It can be activated for one or several menu locations in a single theme.
- Mobile friendly
- Compatible with tactile mobile devices and retina ready.
Like almost all plugins, there’s a Premium version that adds several features, such as fixed menus, 600 additional icons, custom icons, custom styles for menu items, user profile restrictions, Google fonts, and custom fonts, as well as updates and priority support.
However, the free version is in itself very complete and will allow you to create colorful menus in a professional, simple and fast way, without excessive or confusing options. The documentation is clear and concise, but since it was only available in English, we decided to translate it, along with the plugin itself.
How to install the Max Mega Menu?
Access via FTP the WP installation path.
Upload the file megamenu-es_ES.mo to the folder / wp-content / languages / plugins /
After the installation, in the “Appearance” section of the Desktop, go to Menu and you will see a box of Max Mega Menu settings, where you can manage the plugin options.
How to enable Mega Menu for a specific location in the Theme?
Go to Appearance and then Menus. If you don’t have the menu set up, you will need to create a new one.
Click on “Create a new menu” and make sure that the new menu is assigned to the location of the Theme at the bottom of the page.
You will see the Mega Menu settings on the right side. Click on the Enable or Activate checkbox and then select Save.
Your Mega Menu will now be converted into a Mega Menu for the location of the Theme that we assign as relevant. This will complete the basic configuration of the Max Mega Menu and you can start adding features, widgets, menu icons and customize it.
Customize the Max Mega Menu
Show items in the Mega Menu
By default, the child menu should be displayed in a drop-down menu on your website. To convert a drop-down menu into a Mega Menu, change the display mode of the sub-menu from the drop-down menu to Mega Menu. Each child menu will be displayed in the Mega Menu editor. It can be expanded or contracted using the arrows on the right and left to determine the width of the mega menu.
Show Widgets in the Mega Menu
Select a Widget to add to the Mega Menu using the selector on the top right. The Widget selector will show you all those installed on your website.
To edit a widget, click on the down arrow that is on the right. Use the left and right arrows to expand or collapse the widget.
Change the number of columns
The Mega Menus can be adjusted to display between one and eight columns of content. Each Mega Menu can be configured to use a different number of columns.
Use the selector at the top right of the Mega Menu settings to change the number of columns.
Drop-down menus
Hierarchical menus are displayed in a drop-down menu by default. You do not need a special configuration, you simply configure the hierarchy of the menu items in the WordPress editor.
Aligning the drop-down menu
By default, the menu will be aligned to the left. To align the drop-down menu with the right edge of the menu (like the sub-menus), change it to Alignment of the submenu, in the Mega Menu settings.
Mega Menu Icons
The Max Mega Menu allows you to set an icon for each menu item. To set an icon, go to Appearance and enter Menus.
Find the menu item to which you want to add an icon and click on the blue button called Mega Menu to speak the configuration panel. Select the Menu icon tab on the left and it will show you the available icons.
Menu item options
Hide the text
To hide the text of the Menu item, select the Hide text and save option. This is useful to show social icons in your menu, where only the icon is needed.
Hide arrow
To hide the arrow of the menu item, click on Hide arrow and save.
Align Menu items
The items in the Menu are aligned to the left by default. To align them to the right, open the Mega Menus settings for the item in question and click on General Settings. Then select the right or left alignment and save.
Note: Menu items aligned will appear in reverse order on the right side. To cancel this effect, rearrange the order of the items in your menu.
Align drop-down menus
They are aligned by default to the parent menu and expand to the right. You can invert this position in SubMenu Alignment and selecting Right.
Align Mega Menu
By default, Mega Menus are 100% wide, so aligning them to the right or left will not have a visible effect.
General settings
Output CSS
The Max Mega Menu generates the CSS required to display its menus. The CSS output option allows you to choose how CSS is added to your page.
When this option is enabled, this is how the CSS will look in your HTML page:
<link rel='stylesheet' id='megamenu-css' href='https://www.maxmegamenu.com/wp-admin/admin-ajax.php?action=megamenu_css&ver=1.7' type='text/css' media='all' />
The CSS is recovered through a dynamic cache (creating an extra call to WordPress) and can slow down the page depending on certain WordPress installations.
Save to system files (recommended)
When this option is selected, the CSS will be automatically saved in your upload directory.
<link rel='stylesheet' id='megamenu-css' href='https://www.maxmegamenu.com/wp-content/uploads/maxmegamenu/style.css?ver=f399f6' type='text/css' media='all' />
This option was introduced in the Max Mega Menu version 1.7. If the CSS cannot be saved automatically by server permissions, for example, or we realize that it was manually edited, the Max Mega Menu will be based on the Queue option via admin-ajax. The CSS Output method is much faster than queuing.
Output in <head>
When this option is selected, the CSS will be minimized and placed in a style block.
<style type="text/css">#mega-menu-wrap-primary_navigation.......</style>
This option is fast but may result in some kind of unpleasant code on your page.
No CSS output
This option can stop the Max Mega Menu from having any CSS output from your page. You will have to queue up your own CSS so that the menu works correctly.
Click behavior
If you have configured the first click to follow a link, or you are viewing the website on a touch screen, this setting defines what will happen when the user makes a second click on a menu item that has a submenu.
By default, the first click or tap on a menu item will open the submenu, and the second click will close the submenu. This makes it impossible to follow the initial link. If you want your users to follow the link, set this option to “First click open submenu, the second click follow the link”.
Menu style
Under Menu Themes, in the Mega Menu, you will find a theme editor that allows you to edit the appearance of the menus. Mega Mega Menu has a default built-in theme but you can create your own themes.
This theme editor allows you to modify all aspects of the menu style, including the font, color, and size of your menus.
To create a new theme, go to Mega Menu, Menu themes and click Create new Theme. You can also duplicate the theme and modify the duplicate.
After making all the settings you want, save the changes. To apply a new theme to your menu, go back to Appearance, then click on Menu and in the Mega Menu settings select the new theme.
Widgets
Max Mega Menu comes with a built-in widget that allows you to display a specific menu location with a widget’s area. Depending on the theme, you will probably have areas of widgets in the header, footer, and sidebars.
How to add a Mega Menu in the areas of widgets?
Step 1: Register a new menu location
Many of the Themes register an established number of menu locations. If you already have a menu assigned to the primary menu, you probably do not want to display exactly the same menu in the same place.
First we must create a new menu location specifically for use within the widget.
In the general Mega Menu settings, click Add another menu location and rename it.
Now we will have a new menu location that we can do with the Max Mega Menu widget.
Step 2: Assign a menu to a new location
On the Menus tab under Appearance create a new menu and assign it to the new menu location.
Step 3: Add the Mega Menu widget to the sidebar
In Widgets, under Appearance, drag the Max Mega Menu widget to the sidebar and select the new menu location.
The menu will now be displayed in the sidebar. You can repeat the same steps to create and display multiple Mega Menus on your page.
Add the images in the Mega Menu
Now that we have the menu ready, it is time to insert the images. You must have them ready. The recommended size is 300 x 180 px. Once we have them, we import them into the WordPress library. When they are all added, we select and annotate each URL.
Finished the previous step, we can go to the page Menus within Appearance. We display the main submenu and in the Navigation label field we put:
<img src = "The URL of the image" alt = "Alternative text" width = "100%" />
We must replace the text that is in quotes “The URL of the image” with the URL that you had copied from the image you want to place.
We repeat the process for the other remaining main submenus. Now, in each of the submenus, we deploy them and in the CSS Classes field (optional), we put mega-link.
We are referring to a class that we are going to create and put in our child or Divi stylesheet, then Theme options and then custom CSS.
With this class, we will customize the appearance of each of the submenus, which we can also modify as we wish.
Add CSS
When you hover your mouse over each of the images, the images have a fade effect along with the submenu element directly below. This is because the image is part of that link, so when you click on it the associated URL will be displayed.
For this last step, we will add custom CSS to the menu so that the text is larger and centered. In addition, we will round the edge of the image to look cleaner.
In the Admin, navigate to Divi and click on Theme Options. Scroll down to the custom CSS box and enter the following CSS:
.mega-link > to {
text-align: center;
font-size: 14px! important;
text-transform: uppercase;
font-weight: 400! important;
letter-spacing: 1px;
}
.mega-link> a img {
margin-bottom: 8px;
margin-top: 18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}