How to Add Mega Menu in WordPress Site?

You can create a header menu in WordPress to show any post, page, category or custom link. It is also possible to use “Navigation Menu” widget to show a list of links anywhere on your site.  By default, you can show the links as submenu items in a single column that appears as a drop-down. A mega menu is a larger-than-normal drop-down menu that allows you to display far more information than a standard drop-down menu. Mega menus allow you to include multi-column drop-down menus with rich media like images and videos in your navigation. In this article, we will explore how to add mega menu in WordPress site.

Example of Mega Menu

Mega menus are used by popular websites to offer highly engaging and interactive navigation menus. The website of CNET is an excellent example of a website with a mega menu. You can hover over different menu items to reveal mega menu items organized into categories.

In this two-dimensional form of menu layout, all related topics are divided into sections for more straightforward browsing, either vertically or horizontally.

Benefits of using Mega Menu

Compared to a simple drop-down menu, mega menu has the following advantages.

• Mega menus are a user-friendly way to draw attention to deeper material on your website. It is especially useful for websites that have a lot of content and website owners can display additional widgets in their top menu.
• They are a great design strategy for fitting many options or revealing lower-level web pages at a glance.
• Mega menus provide users with a more detailed and well-organized site navigating experience.
• Mega menus are an excellent way to point to portions of your website that would otherwise be difficult to find.
• You can use a mega menu to show numerous links at once.

However, not all websites need mega menus. Generally, websites like news, magazines and large scale sites having plenty of categories can make use of mega menu to showcase their content. You also need to take care the display is responsively adjusted to the width in smartphones and tablets.

Add Mega Menu in WordPress with Plugin

There are various plugins that you can use to add Mega Menu in WordPress site. However, the “Max Mega Menu” plugin is one of the most popular plugins that you can use. It comes with both the free version and the premium version. Luckily, the free version is enough to create an excellent menu for your site.

Setup Menu and Locations with Max Mega Menu Plugin

Before getting started with the Max Mega Menu plugin, create a menu in your site by navigating to “Appearance > Menus” section in the admin panel. Later you can convert this normal menu to a mega menu with the help of plugin. When done, go to “Plugins > Add New” section, install and activate the Max Mega Menu plugin as shown below.

The plugin will add a new menu item in the sidebar named – Mega Menu. Click on this menu to set the location where you want to add mega menu. A window will appear showing the different menu locations provided by your theme. Select a location where you want to place the mega menu. As mentioned, you should already have a menu available in the location you select. In our case, we created a menu “primaryMenu” and set its location to the “Top Bar”. Therefore, in this post, we will select “Top Bar” as the target location for our Mega Menu.

Note: When you try adding the mega menu to a location with no set menu, you will see a warning message “Assign a menu to this location to use these options”.

After selecting a location for the mega menu, navigate to the “Menus” page under “Appearance”. You will see that the  Max Mega Menu plugin added a “Mega Menu” button on your menu titles. This button is only visible when you hover over the menu items. For example, you can see this button when we hover over “Home” menu item as shown in the image below.

Creating a Mega Menu Using Max Mega Menu Plugin

In this example, we will create a mega menu under the “Technology” menu item, which will appear on our “Top Bar” location. The image below shows our site before adding a mega menu.

To get started, navigate to “Appearance > Menus” section and hover the mouse over the “Technology” menu item, as shown in the image below. You will see set of options to customize the appearance of your mega menu under “Max Mega Menu Settings” section. Make sure the “Enable” box is checked and customize the animation effect / theme / trigger event. Click “Save” to apply your changes.

When you click on the “Mega menu” button, a window will appear where you can customize the appearance of the mega menu. On the “Submenu display mode dropdown list,” select the option “Mega Menu – Grid Layout.” That will reveal the “Column” and “Row” buttons, as shown in the image below.

Let’s create a mega menu consists of two rows and four columns. Click on the “+Row” button to create additional rows and the “+Column” button to create more columns. The resulting grid image is shown below.

Now, to add items to our mega menu, we will use the widgets provided by our theme. At the top-right corner, you will see an option to select a widget that you want to use on your mega menu as shown in the image below.

Tip: Creating a Mega Menu from widget items can be a little complicated since most of the items are meant either for the sidebar or footer. However, there is a trick. There are few main widgets you can use – Navigation Menu, Image, Custom HTML and Categories. For example, you can create several menus each containing its own pages and add them to the mega menu using the “Navigation Menu” widget. Similarly, you can insert categories using “Categories” widget if required. To understand this better, let’s get into action.

Let’s create four additional menus “menuONE, menuTWO, menuTHREE and menuFOUR” under “Appearance > Menus” section. Each menu contains different posts, pages and custom links. We will use the “Navigation Menu” widget to import these menus into our mega menu.

On our Mega Menu configuration window, we will drag the “Navigation Menu” widget and place it in the cells of our first row. We will then use this widget to select our menus ‘menuONE, menuTWO, menuTHREE and menuFOUR’ as shown in the image below and change the headings.

To apply the changes, ensure you click the “Save Menu” button on your “Menus” page. When we reload the website, you can now see that we have successfully created the first row of our Mega Menu.

Let’s now populate the other rows of the mega menu using the various available widgets. We will use the widgets like Navigation Menu, Image, Custom HTML, etc. The resulting mega menu looks as shown in the image below.

You can use any default or custom widgets and insert the content in your mega menu.

Using Mega Menu with Themes

Other than plugins, there are also WordPress themes that support creating a mega menu. If you want to use your theme to set a mega menu, you must first confirm whether or not your theme supports that functionality. Most commercial WordPress themes offer this feature as in-built so you do not need a separate plugin. One of the significant drawbacks of using theme is that you will lose the mega menu when changing your theme. However, when you use a plugin, the mega menu will still be available unless you deactivate the plugin.

Conclusion

A mega menu is a highly effective online navigation system that can help improving your site’s navigation significantly. A mega menu is beneficial if you have a sophisticated website with many pages and product categories. You can create a mega menu if your site’s theme supports or use Max Mega Menu plugin to create multi-column mega menus. The plugin even allows you to add some eye-catching widgets to go with your menu items.