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.
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.
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.
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.
As you can see, the mega menu has list items in two columns and an image in another column.
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.
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.
It’ll open a pop-up. Then select Mega Menu – Grid Layout from the Sub menu display mode dropdown in the Mega Menu tab.
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.
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.
To add a widget, click the Select a Widget to add to the panel dropdown at the top right corner and choose a widget.
For this design, I’ve already created a dummy menu. I’ll add that to the first two columns through the Navigation Menu widget.
For the third column, we can add an image through the Image widget.
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!
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.
From the Mega Menus tab, you can adjust the dropdown style. Once adjustments are done, click on Save Changes at the bottom.
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.
With these style adjustments, our mega menu is now ready!
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.
First, you need to find a full-width container. In this instance, it’s .navigation-top
class.
Copy the class name and paste it in the Outer Width box of Submenu Width, then save the changes.
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.
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 )
Muhammad Nabeel
September 22, 2018
Nice Information keep the good work up thanks for sharing..
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.
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.
طراحی سایت
March 4, 2019
thanks ananda for your help , i have one question . can i choise with for any row ?