How to Add a Mega Menu in WordPress
Last Updated: October 13, 2021 in Guides
When visiting WordPress websites, you may have seen a lot of impressive mega menus. They are becoming a rising trend because of their usefulness and eye-catching appearance. Mega menus are especially suitable for websites crammed with information, or for when you want to put the feature posts into the main menu.
To explain simply, a mega menu is a type of expandable menu in which many choices are displayed in vertical or horizontal dimensions on your website. When you hover or click the menu, the sub menus will show up like this:
Impressive, isn’t it? In this post, I will show you how to add a mega menu in the easiest, fastest, and freeway.
Let’s get started!
Have you ever been confused because your website has too many sub-menus? If you have, you will see a mega menu as your savior. It helps you show more sub-menus more attractively, and users just need a second to see which posts or pages are featured on your website.
Besides, an outstanding advantage of mega menus is that you can add images, audio, … to them. It makes your menu much more vivid to watch.
Do you want to add a mega menu like this? I will show you how right below.
We have 3 ways:
- Use codes: As you know, this is the most complex way, only for experts.
- Use a theme integrated with a mega menu: You just need a theme pre-built with a mega menu and use it.
- Use a plugin: This is a simple, fast, and freeway. Even if you are just a newbie, you can make it effortlessly.
If your theme is not pre-made with a mega menu, you should use a plugin like me in this post. Here I will choose the Max Mega Menu plugin because it is popular, easy to use, and customize. You can install this plugin directly on Dashboard.
After installing and activating the Max Mega Menu plugin, a shortcut named Mega Menu will be in Dashboard.
Now let’s see what the first step is!
Go to Appearance > Menus. In the Menu Settings section, tick the Header option to display the mega menu on the header of your website.
In the Max Mega Menu Settings section, click Enable to enable this function on the main menu:
After activating, we will need to work in the Menu Structure window next. You will see the name tags of the pages on your websites.
Hover a name tag, the blue Mega Menu button will show up. Click this button to convert each of the menus into mega menu mode.
At this time, you will see a settings screen with a lot of options for mega menus. We will configure our menu in the next step.
First, you need to choose a layout for your mega menu. You can choose one of the three options: Flyout menu, Mega menu - Grid Layout, or Mega Menu - Standard Layout. For me, I choose the standard layout.
After choosing a layout, the other two tabs, Select a Widget to add to the panel and Number of columns, will show up. Just choose the number of columns that are the same as the number of the widgets in your mega menu.
For example, I want to add 4 widgets to my menu, so I will choose 4 as the number of columns.
Each of the widgets added will have a setting symbol in the left corner. Click this symbol and another setting screen will show up.
Each type of widget has a certain setting screen, but basically, there are 3 parts you need to notice:
- Title
- Link to
- Others: For example, videos, calendars, audio, … that are responsive to the type of widget you chose. I chose the Image widget so I need to add more images.
Let’s see our result!
At this time, your mega menu is pretty cool! But if you want to adjust more to make it more beautiful, click Mega Menu > Menu Themes > Mega Menus.
Here you will see a lot of options for you, like background color, font, column size, …
All of those steps are really easy, right? Hesitate no more and let’s try making your own mega menu!
Last Words
So I have instructed you to add a mega menu in WordPress easily, quickly, and free. I hope you may find this post useful. If you still have any wonders or questions, just leave comments below for me. Good luck to you!