pixel

Mega Menus have been around for a while, and there are ways you can apply some code and achieve your own, but the result is pretty basic UNTIL NOW! The QuadMega Menu plugin for Divi just hit the shop and I was so curious I had to download and it try it for myself.

I typically will enlist the help of Randy A. Brown to write the reviews and explainer posts, because, well, he is soooooo good at those posts, but as you can tell already my enthusiasm for this plugin is so sincere that I want to be the one to share.

As is often the case, I used my personal Eileen website as my sandbox.  The developers have excellent documentation and demo’s, which you can access via their product page, but this test is to see if the average Eileen can reproduce.  Here we go.

To begin you will upload QuadMenu-Pro to your plugins via the WordPress dashboard and activate.

You will see this screen.  You need to turn Integration on and theme needs to be set to Divi Primary.  The image shows me applying the settings to the Footer Menu, but you will probably want to select Primary Menu.first screen after you install the quadmenu pro plugin

Next, click on Configuration and you will see more options.  Here you can toggle the options on or off depending upon your needs, then select SAVE and then Create Theme.  You will not find any of their fun options if you don’t select Create Theme. PS you may not see that you can import / export your work, which I love.

 

Main Configuration Settings for QuadMenu - Pro for Divi

There are many options under the create theme, toggle on or off what is best for your design.

Save and refresh and you will see your new menu theme on the left hand navigation, you may not need to change a thing, but if you want to make edits, you can easily find what you are looking for.

Next, navigate to your WordPress Menus.  As a reminder, you go to Appearance -> Menus and then we can work on the Primary Menu.

You will notice that you now have an option on your left hand menu options panel called QuadMenu Options (it’s just above Pages & Posts).  If you open this, you will see all of the QuadMenu options that are available to you: Mega, Cart, Search, Icon, Social, Login, Tabs & Carousel.  When you click inside the checkbox and click add to menu, that item will appear on the right side in the menu list and you can drag and drop it just like any other menu item.

When you hover over the items in the menu list you will see a QuadMenu Pro Icon.  Click on the blue icon and a dashboard of options will open. The options available will vary based on your choice (ie Mega has a different option panel than Search or Carousel).

I won’t go over everything, but here are a few options you may like.

Adding a Search bar to your menu.

  • To do this, in your WordPress Dashboard go to Appearance -> Menus.
  • Open the Quad Menu Items and Select Search.
  • Search will appear on the right hand side, the last option just as a page would.
  • Hover over Search and click on the blue QuadMenu Pro icon.  adding a search to your navigation
  • Once you click QuadMenu Pro you will be given a dashboard of configuration options.

Search Options Configuration with QuadMenu Pro

Using Icons as Menu Items

  • In your WordPress Dashboard navigate to Appearance ->Menus and open the QuadMenu Options
  • Select Icon and add to menu
  • This will add ONE icon tab to the bottom of your menu on the right hand side.
  • Hover over the menu item and you will see QuadMenu Pro in blue – click that button to open your Icon options
  • You will need to configure the default settings (such as the link the icon should send someone to, a url, maybe an email or phone number).
  • Click on Icon to select your icon
  • You can rename the navigation label so you don’t have a bunch of items that say icon 🙂

using icons in your megamenu pro navigation bar

Adding a Carousel 

  • In your WordPress Dashboard navigate to Appearance ->Menus and open the Quad Menu Options
  • Select Carousel
  • This will add ONE icon tab to the bottom of your menu on the right hand side.
  • Hover over the menu item and you will see QuadMenu Pro in blue – click that button to open your options
  • There are a LOT of tabs here.  Be patient, each one takes a moment to load at the start.
  • If you look at your last option in the list Panels, you will see the + symbol.  Add more, by simply clicking on the +.  Each panel represents a slider, or carousel item.
  • Within each panel you have the ability to add columns.  You may add columns here, click the blue Add Column button In my examples I have three columns.
  • If you click on the wrench in the row you will see more customization options, such as row width
  • Once you have columns, you will see a new option on the left hand side of your screen QuadMenu Widgets. Check any widget that you may want on your MegaMenu.
  • There are tons of options, in one test I even created a media gallery right from the widget area. Click on the widget you want and it will appear in the column to the right.
  • Click the wrench to edit the content within that widget.
  • Click Add, then Save
  • Click the X in the top right
  • Save your menu
  • Done 🙂

adding the carousel to using quadmenu pro

I made a video of this to demonstrate how easy it really is to build this.  My example is a bit ugly, but you will get the point.

Menu Items with Images /  Featured Blog Posts with Featured Images

  • To do this, in your WordPress Dashboard go to Appearance -> Menus.
  • Open the QuadMenu Items and  put a check next to Mega and click add to page.
  • Mega will appear on the right hand side, as the last option just as a page would.
  • Hover over Mega and click on the blue QuadMenu Pro icon.
  • There are many options for settings, but let’s look at columns.
  • Click columns, in my example I added 3.
  • If you click the plus sign in the middle of the Column, the QuadMenu Widgets option will open on the left side of the screen.  Select what you want in each column.
  • In my example I added an image and a blog post in each column.
  • On the image tab I had to add an image, click +Add and then Save.
  • If you click on Default (first option on the left) you will be able to label your tab.  I called mine Popular Blog Posts, this will show on your navigation bar.

Mega Menu with Columns

MegaMenu with Images

Tabs

  • You would follow the same basic steps outlined in the other examples.  The developer, Juan, who is terrific, made this video on setting up tabs, which you may find helpful.

Overall, this plugin literally has everything you could imagine for a mega menu.  And it’s your lucky day, because right now a single license is on SALE for $9.  Visit the Divi Mega Menu sales page and you find find a link to demo’s and documentation.

If you have any questions let us know.  And don’t be limited by my examples, please use your imagination and post a link to the sites you create with QuadMenu Pro!

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This