add mega menu to wordpress site how to tutorial woman working on desktop with inspect code

How to add a mega menu to your WordPress site

Ananda Projapati's Layout avatar

If you have a website with a large amount of content and want to show more items in the menu, consider using a mega menu. Mega menus are especially effective for eCommerce sites with lots of product categories, as you can show a product image alongside different categories, like eBay does.

By default, you can create dropdown menus in WordPress with multi-level options, but you can’t create a mega menu. Some premium themes like Avada or Divi have mega menu options built in, but what if you want to have one in your free theme? In this article, I’ll show you how to use a plugin to add a mega menu on a WordPress site.

how to add a mega menu to your wordpress site how to tutorial woman looking at mega menu on desktop
Meet Keegan, Flywheel’s Engineering Manager!

Adding a mega menu in WordPress

To add a mega menu, first you need to install the Max Mega Menu plugin from the WordPress Plugin Directory. It’s the best free plugin available in the library, in my opinion. Once installed and activated, you’ll see a new menu item labeled Mega Menu in the dashboard.

To enable the max mega menu, go to Appearance > Menus

In the menu page, click on the Enable checkbox in the Max Mega Menu Settings section and then click Save.

mega menu wordpress menu save enable screenshot

You don’t need to do anything with the other remaining options, but you can play around to see the effects.

With that, you’ll see the plugin taking over the default menu on the front-end.

mega menu wordpress tutorial screenshot sample page

Now let’s explore some of the settings through a real-life example. We’ll try to recreate something similar to eBay’s mega menu.

Here’s what the menu looks like.

mega menu wordpress tutorial ebay mega menu example screenshot

As you can see, the mega menu has list items in two columns and an image in another column.

Discover the perfect WordPress development workflow with this FREE ebook!

First, let’s create the menu structure. There are two ways you can create the menu here.

One is the default WordPress drag-and-drop menu editor. You can stack the menu items one after another as you would normally create any dropdown menu, but the design we’re going after here can become a little messy and hard to maintain with this method.

mega menu wordpress tutorial drag and drop mega menu feature screenshot

The second option is to use widgets within the mega menu. Hover over the item you want to have the mega menu and click on the Mega Menu button.

mega menu wordpress sample page settings mega menu

It’ll open a pop-up. Then select Mega Menu – Grid Layout from the Sub menu display mode dropdown in the Mega Menu tab.

mega menu wordpress tutorial how to add mega menu with layout grid screenshot

This is the best option for creating custom mega menu layouts. The other options are not very flexible, but you can always play around to know more.

Click on the + Column button to add more columns.

mega menu wordpress tutorial how to add columns screenshot

To create a mega menu like eBay’s, we need two 3/12 columns and one 6/12 column. (This will make the third column twice as large as the first two, plenty of space for a nice big image!) You can adjust the column width by clicking the left or right arrow.

mega menu wordpress tutorial how to adjust column width with left and right arrows

To add a widget, click the Select a Widget to add to the panel dropdown at the top right corner and choose a widget.

mega menu wordpress tutorial how to add a navigation menu from the select widget dropdown screenshot

For this design, I’ve already created a dummy menu. I’ll add that to the first two columns through the Navigation Menu widget.

mega menu wordpress tutorial how to category 1 dropdown option screenshot

For the third column, we can add an image through the Image widget.

mega menu wordpress tutorial how to screenshot of image title third column

You can easily drag and drop columns and widgets to rearrange them, and you can even hide columns for different devices by clicking on the small icons located at the top of each column.

Now if you look at the menu design on the site, the mega menu structure is complete. Now we just need to adjust the style to match the theme!

mega menu wordpress image added to mega menu

For style adjustments, go to Mega Menu > Menu Themes > Menu Bar. We’ll change the menu bar color and other settings to match the theme.

mega menu wordpress tutorial how to mega menu menu themes menu bar screenshot options

From the Mega Menus tab, you can adjust the dropdown style. Once adjustments are done, click on Save Changes at the bottom.

mega menu wordpress tutorial how to mega menu setting color adjust save changes settings screenshot

The Flyout Menus tab is for a flyout menu style adjustment, and from the Mobile Menu tab, you can set the mobile breakpoint and styling.

You can also write your own custom CSS in the Custom Styling tab like I’ve done here.

mega menu wordpress tutorial how to adjust custom settings option in menu bar screenshot

With these style adjustments, our mega menu is now ready!

mega menu wordpress screenshot categories preview

If you’re wondering about the General Settings tab, the default settings are good enough for most cases, but feel free to explore the possibilities.

Creating a full-width mega menu

If you want to create a full-width mega menu, unfortunately, there are no easy settings within the plugin, but you can still do it.

Want to make changes without breaking your live site with a local WordPress development app? Download Local by Flywheel for free!

First, you need to find a full-width container. In this instance, it’s .navigation-top class.

mega menu wordpress tutorial create full-width menu inspect navigation top screenshot

Copy the class name and paste it in the Outer Width box of Submenu Width, then save the changes.

mega menu wordpress outer width navigation top

Now if you check the menu in the front-end, it’ll show a full-width mega menu.

Last, if you want to copy the same menu settings on another website, you can easily export and import the settings from the Tools tab.

mega menu wordpress tutorial how to edit settings tools tab screenshot

Conclusion

So, you’ve just learned how to create a mega menu in WordPress, even if your theme doesn’t have an option for it. If you’re running a website that has a lot of content, mega menus can really help you organize your items in an effective way to enhance the user experience.


Plugins you’ll love!

Download this ebook for a list of our most recommended plugins for developers! We’ve found all of these plugins to be straightforward to use, not too performance heavy on your site, and just downright reliable.


Customize your site further with another tutorial!

Comments ( 4 )

  1. Muhammad Nabeel

    September 22, 2018

    Nice Information keep the good work up thanks for sharing..

  2. Dhaval Patel

    September 26, 2018

    Hello,
    Indeed great information. But I have 1 doubt I am using Envato theme in my website http://stampsceremony.org/mybpcreditcard-login. So how to set menu in this theme? There are several option like sticky menu and etc. Please reply. Thank You

    • Ananda Projapati

      September 26, 2018

      Thanks, Dhaval for checking in, since you mentioned Envato theme I suppose its a premium theme then the best option is to check their documentation to see if they have a mega menu of their own like many premium themes does.

      If it doesn't then you can always try Max Mega Menu plugin and follow the steps mentioned here to see how it integrates with your theme.

  3. Wendy

    October 30, 2018

    I found all the information mentioned really interesting and justifying the topic of the post. I am hoping the same high-grade blog post from you in the upcoming as well.

  4. طراحی سایت

    March 4, 2019

    thanks ananda for your help , i have one question . can i choise with for any row ?

Join the discussion