Skip to content

Need to optimize your sites for search engines with a lightweight and easy-to-use SEO plugin? Check out our plugin Slim SEO!

How to Add a Mega Menu in WordPress

How to Add a Mega Menu in WordPress

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:

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.

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!

Why Should You Use a Mega Menu?

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.

An outstanding advantage of mega menus is that you can add images, audio, … to them.

Do you want to add a mega menu like this? I will show you how right below.

How to Add a Mega Menu

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.

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!

Step 1: Activate Mega Menu Function

Go to Appearance > Menus. In the Menu Settings section, tick the Header option to display the mega menu on the header of your website.

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:

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.

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.

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.

Step 2: Customize the Widgets in the Mega Menu

First, you need to choose a layout for your mega menu. You can choose one of the three options: Flyout menu, Mega menuGrid Layout, or Mega MenuStandard Layout. For me, I choose the standard layout.

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

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.

 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.

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 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!

This is result of adding a mega menu in WordPress

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.

If you want to adjust more to make it more beautiful, click Mega Menu > Menu Themes > Mega Menus (adjust things like background color, font, column size, …)

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!

Leave a Reply

Scroll To Top