How to add a mega menu to a WordPress site?

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

Mega menu example

Mega menus are used by popular websites to offer highly engaging and interactive navigation menus. The CNET website is a great example of a mega menu website. You can hover over the different menu items to display the mega menu items organized by category.

In this 2D menu layout form, all related topics are divided into sections for easier viewing vertically or horizontally.

Benefits of using Mega Menu

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

• Mega menus are a handy way to draw attention to deeper content on your website. This is especially useful for websites with a lot of content and website owners can display additional widgets in their top menu.
• They are a great design strategy for picking up a lot of options or revealing lower-level web pages at a glance.
• Mega menus provide users with a more detailed and well-organized site navigation experience.
• Mega menus are a great way to point out parts of your website that would otherwise be hard to find.
• You can use the mega menu to show multiple links at once.

However, not all websites need mega menus. Typically, sites such as news, magazines, and large sites that have many categories can use mega menus to showcase their content. You also need to make sure that the display fits exactly the width in smartphones and tablets.

Add a Mega Menu to WordPress with a Plugin

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

Customization and location menus with the Max Mega Menu plugin

Before you get started with the Max Mega Menu plugin, create a menu on your site by going to Appearance > Menu in the admin panel. Later, you can convert this regular menu into a mega menu using a plugin. When done, go to Plugins > Add New, install and activate the Max Mega Menu plugin as shown below.

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

Note: When you try to add a mega menu to a location without a menu installed, you will see a warning message “Assign a menu to this location to use these options”.

After choosing a location for the mega menu, go to the Menu page in the Appearance section. You will see that the Max Mega Menu plugin has added a “Mega Menu” button to your menu headers. This button is only visible when hovering over menu items. For example, you may see this button when hovering over the Home menu item, as shown in the image below.

Creating a Mega Menu with the Max Mega Menu Plugin

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

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

When you click the Mega Menu button, a window pops up where you can customize how the Mega Menu looks. From the Submenu Display Mode drop-down list, select the Mega Menu – Grid Layout option. This will open the Column and Row buttons as shown in the image below.

Let’s create a mega menu consisting of two rows and four columns. Click the + Row button to create more rows and the + Column button to create more columns. The resulting mesh image is shown below.

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

Tip: Creating a mega menu from widget items can be a little tricky since most of the items are for either a sidebar or a footer. However, there is a trick. You can use several basic widgets – navigation menu, image, custom HTML and categories. For example, you can create multiple menus, each containing their own pages, and add them to a mega menu using the Navigation Menu widget. Similarly, you can insert categories using the Categories widget if needed. To better understand this, let’s get into action.

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

In the 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 the menu “menuONE”, “menuTWO”, “menuTHREE” and “menuFOUR” as shown in the image below and change the titles.

To apply the changes, make sure you click the “Save Menu” button on the “Menu” page. When we reload the website, you can see that we have successfully created the first line of our mega menu.

Now let’s populate the other mega menu lines using the various widgets available. We will be using widgets such as Navigation Menu, Image, Custom HTML, etc. The resulting mega menu looks like the one shown in the image below.

You can use any standard or custom widgets and insert content into your mega menu.

Using the mega menu with themes

Besides plugins, there are also WordPress themes that support mega menu creation. If you want to use your theme to customize your mega menu, you must first confirm if your theme supports this feature. Most commercial WordPress themes offer this feature as built-in, so you don’t need a separate plugin. One of the significant disadvantages of using a theme is that you will lose the mega menu when you change the theme. However, when you use the plugin, the mega menu will still be available unless you disable the plugin.

Conclusion

A mega menu is a highly efficient online navigation system that can help improve the navigation of your site significantly. A mega menu is useful if you have a complex website with many pages and product categories. You can create a mega menu if your theme supports it or use the Max Mega Menu plugin to create multi-column mega menus. The plugin even allows you to add attractive widgets to accompany your menu items.