Max Mega Menu Plugin And DIVI

by Aug 5, 2017Divi Tutorials0 comments

Menus are one thing in WordPress you just can’t get away from.  Mega Menus though bring in much more functionality like being able to display widgets and text.  Although the DIVI theme has a mega menu function it does not have that much power.  Until the DIVI theme gets that much power we have a free DIVI compatible plugin called Max Mega Menu that can come to our rescue.

To get Max Mega Menu to play nicely the easy way with the DIVI theme though is to install the plugin and then install the free child theme.  The  child theme includes CSS styles, a functions.php file that give the Max Mega Menu plugin a new menu theme you get to use, and a header.php file with some added code in it.

First up lets look at the plugin settings.

Menu Theme General Settings

Not much going on here in the general settings.

You can change the name of the theme, change the look of the arrows, add a shadow to the mega menu, etc…

Menu Theme Menu Bar Settings

This section has loads of things you can change here.  Font changes, padding changes, to everything else that goes with top menu items you can change.

Menu Theme Menu Bar Settings

This section has loads of things you can change here.  Font changes, padding changes, to everything else that goes with top menu items you can change.

Menu Theme Custom Styling Settings

This section is only for added CSS to the menu.  Not much here.

A look at a couple Max Mega Menu Layouts

This is a basic layout here.  We have some text and we are displaying a widget that is showing off a Google Map.

This here is a second layout I am showing you.  This one displays a custom menu.  Next to it is the Recent Post With Thumbnails plugin widget.

I set post count to 3, the category to chairs, the Print slugs of post categories in class attribute of LI elements? option got enabled, and I set thumbnails to 150px by 150px;  I also included this bit of CSS to force all the posts to display posts inline

 li.chair { display: inline-grid!important; max-width: 20%!important; overflow: hidden; margin: 0 0 1.5em; } 

The above image is a desktop view.  Mobile view though was not so good looking so I added in this CSS to make it look better:


@media only screen and (max-width: 600px)
{
#mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-item {
 width: 100%;
}
 li.chair { display: inline-grid!important; max-width: 30%!important; overflow: hidden; margin: 0 0 1.5em; }

}

The code forces items to be full width which I say looks much better.

Now that I have shown you a couple ideas I will now show you the backend of the plugin through the menu option.

A look at the plugin through the menu option backend

If you have selected a display location of the menu and saved the change this new set of menu options show up.  You can select weather this is a mega menu or not, what theme you are using, etc…

Note:  Only top level menu items get the full mega menu treatment.

After You Click A Top Menu Item

The free version of the plugin shows three menu items and the first one is mega menu.  On this screen you can insert widgets into the menu, weather this is a flyout menu or mega menu, and column number.   You can go up to 9 columns here.

When you select a widget you will see some left and right arrows.  That changes the width of the widget.  As you can see by this image we have a text widget at a 2/5 size and a google map widget at 3/5 size.  You also see a wrench type looking icon.  If you click on the icon all the options for the widget show up.

The settings menu options are mainly for turning things on and off like links, is item displayed on desktop, is item displayed on mobile.  It also includes option for icon position.

The icon menu option is also available to sub menu items.  Mainly what you can do here is select an icon and it will display next to the menu item

What you get if you upgrade to the pro version.

Google Font support and Custom font support
Woocommerce support
More Menu Icons
Search Box
And much more.

Up next from me is going to be a free wordpress slider plugins that work nicely with the DIVI theme.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

RECENT POSTS

Top 20 Feminine Divi Child Themes

Top 20 Feminine Divi Child Themes

Divi has the most impressive feminine child themes on the market, and they can build any type of website you need. In this article, we’ll look at the top 20 feminine Divi child themes for your next Divi project.

Possibilities Divi Child Theme Installation Instructions

Pre-installation preparation:* Install and Activate recommended plugins from the repository.- Caldera Forms by Caldera Labs* Enter your Google Map API key into the Divi Theme Options Step 1: Unzip The child theme package file to find the child theme zip file. Step 2:...

Pin It on Pinterest

Share This