Looking for a way to create a WordPress mega menu at your site?
By default, WordPress makes it easy to create a simple drop-down menu using core functionality, but unfortunately, there’s no core support for mega menus.
- Share the options you have for creating a WordPress mega menu
- Give you a step-by-step tutorial for how to create a mega menu using a free plugin
- 1 WordPress mega menu: Your two options
- 2 Final thoughts
In case you’re not already familiar, a mega menu is basically a larger-than-normal drop-down menu that lets you display way more information than a regular drop-down menu. For example, think of those big menus that Amazon uses:
If you want to create a mega menu for your WordPress site, you have two general approaches…
Some themes offer built-in mega menu support. For example, the Hestia theme includes built-in functionality to create a mega menu.
Unfortunately, I can’t tell you whether or not your theme supports a WordPress mega menu, nor can I give you a tutorial for how to set up your theme’s mega menu because each theme is different.
But, it’s always a good first step to check your theme’s documentation to see if it already has a way for you to create a mega menu.
If your theme doesn’t have mega menu functionality (or maybe even it does!), you can also use a WordPress mega menu plugin to add mega menu functionality to any WordPress theme.
Now, you might be wondering, “if my theme already supports mega menus, is there any reason I still might want to use a mega menu plugin?”
Well, there might be. Here are the pros and cons of each approach…
The benefit of using your theme’s mega menu functionality is that it will instantly match the rest of your theme’s styling as soon as you add it. Basically, it’s convenient.
The downside, though, is that if you ever switch themes, you’ll lose your mega menu functionality.
On the other hand, the benefits of using a WordPress mega menu plugin are that:
- Your mega menu will continue to work even if you switch themes.
- You’ll probably get access to more functionality.
But the downside is that you might need to play around with the plugin’s styling options to make it match your theme.
There are several plugins that can add mega menu functionality to your site, but the most popular and highest-rated by far is Max Mega Menu:
This free plugin lets you build your mega menu using regular WordPress widgets, which makes it very beginner-friendly.
To get started, make sure to install and activate the Max Mega Menu plugin (learn how to install a WordPress plugin). Then, you’re ready to follow along with the guide.
To enable mega menu functionality, go to Appearance → Menus in your WordPress dashboard.
Now, select the menu location for your header. Usually, this is the default menu (i.e. it’s already selected) and it has a Display Location area like “Primary Menu”, “Top Menu”, “Top” etc.
If you don’t have any menus yet, you can follow this guide to create your first menu.
Once you’ve selected the menu location where you want to place your mega menu:
- Find the new Max Mega Menu Settings box on the left
- Check the Enable box
- Click Save
Once you’ve enabled mega menu functionality:
- Hover over the menu item that you want to use to open the mega menu
- Click the blue Mega Menu button.
In the example below, the mega menu will appear when a user hovers over the Shop menu item:
Clicking the blue button should open the mega menu builder interface.
First, choose the type of display mode you want to use. I’ll use Mega Menu – Grid Layout for this tutorial as it’s pretty flexible. Then, use the drop-down menu on the right to add a widget to your mega menu:
You can use any of the standard WordPress widgets in your mega menu, which gives you a lot of flexibility. And you can also use the + Column and + Row buttons to organize the layout for your mega menu.
Continue adding widgets for all the content you want to display in your mega menu.
To edit widgets and add content, click the Wrench icon. And to move them around, you can use simple drag and drop:
Make sure to Save each individual widget after you make any edits.
Once you finish building your layout, you should have something that looks roughly like this:
If you want, you can also dig into the Settings and Icon areas. But you aren’t required to configure any settings there.
And at this point, you now have a working mega menu:
As you can see, though, the menu styling isn’t quite right yet – the black background on the menu items doesn’t really fit with the rest of the theme*.
If you’re experiencing a similar issue, you’ll need to dig into the plugin’s settings to change some colors to make everything fit together.
*Note – if you are actually using the Hestia theme, Max Mega Menu already includes a pre-built design theme to fix this issue. All you need to do is go to Appearance → Menus and choose the Hestia option from the Theme drop-down in the Max Mega Menu Settings – no need to edit any other settings!
To configure your mega menu’s style, go to Mega Menu → Menu Themes in your dashboard. Then, select the Menu Bar tab.
There, you’ll need to edit some colors to match your theme. Normally, the most relevant options to edit are:
- Menu Background
- Menu Background Hover
You might also need to change the font color as well:
Once you do that, your mega menu should fit more closely with your theme’s styling:
Other settings and premium features
You now have all the tools that you need to create a basic WordPress mega menu. But Max Mega Menu has a deep feature list, so if you want to customize some small aspect of how your mega menu functions, I encourage you to further explore the plugin’s settings to see what all there is to offer.
Additionally, there’s also a premium version that gives you:
Remember – if you need to create a WordPress mega menu, you have two good options.
If your theme offers mega menu support, that’s always a great first option. Just remember that you’ll lose your mega menu if you switch themes and you might not have as much flexibility.
And if your theme doesn’t have a mega menu feature, or if you want a little bit more portability and flexibility, the free Max Mega Menu plugin can help you add a mega menu to any WordPress theme.
Have any other questions about creating a mega menu for your WordPress site? Leave a comment and we’ll try to help out!