How to Add Mega Menu on WordPress Website? (Step by Step Guide)

If you are looking to improve the navigation of your WordPress website and upgrade the default menu into something well organized, beautiful, effective and easy to navigate then, you are at the right place. Here, in this blog, we will be discussing a step by step tutorial of how to add mega menu on WordPress website with the help of a WordPress plugin.

The plugin, we will be using is WP Mega Menu Pro. It is one of the fastest selling and highly rated WordPress plugin available on the CodeCanyon marketplace. The plugin comes with advanced features and functionality for upgrading the inbuilt WordPress menu into a multi-dimensional mega menu.

Some of the Major Features of WP Mega Menu Pro:

• 10 Pre Available Horizontal/Vertical Mega Menu Templates
• 5 Pre Designed Mega Menu Tab Templates
• 8 Transition Effects
• 14 Beautiful Colored Skins or Custom Designs
• 14 Pre Available Custom Widgets with Different Layouts
• 8 Inbuilt Menu Icons/Custom Icons
• Unlimited Custom Item Styling
• Advanced Menu Items

Full Details and Features of WP Mega Menu Pro

Add Mega Menu on WordPress Website Using WP Mega Menu Pro

Step 1: Installation and Activation:

Purchase WP Mega Menu Pro from CodeCanyon marketplace at the price of $19. Then install it on your WordPress website. If you have any difficulties while installing the plugin then, you can refer to its documentation or go through the article: How to Install New Plugin to the WordPress Site?

Step 2: Configuration

After that, activate the plugin. Then, you will see “WP Mega Menu Pro” appear on your admin dashboard. Click on it.

You will land on the general settings page of the plugin. It contains different settings tab to configure your mega menu. They are:

General Settings:

The general settings tab contains various option to configure the behaviour and animations of your mega menu. Also, this tab contains different options to configure your mega menu for mobile devices.

Sticky Menu:

Here, you can configure sticky settings of your mega menu to make it sticky on your WordPress website. You can set the sticky opacity, sticky zindex, and sticky offset. Also, you can enable/disable the sticky menu for mobiles.

Image Settings:

From image settings tab, you can choose the image size for the images on your mega menu. Also, you can set the width of the icons on your mega menu.

Shortcodes:

This tab contains the inbuilt shortcode to add your mega menu on any page, post or widgets.

Import/Export:

From here, you can export your custom mega menu to another website and vice versa.

Custom CSS:

Here, you can add additional CSS if you want to anything on your mega menu.

Theme Settings:

AP Mega Menu comes with the functionality to create your own custom design. You can configure all the available options and add a stunning design for your mega menu.

Step 3: Upgrading Default WordPress Menu Into Mega Menu

After you are done configuring your mega menu. Go to Appearance >> Menus to upgrade your default WordPress menu into the mega menu.

Here, you can find “Select WP Mega Menu Pro Settings”. Enable it to integrate your mega menu with the default WordPress menu. Also, you can assign the orientation, trigger effect, transition, theme type and mobile menu.

You can configure and customize your category wise. Hover over any of the categories that you want to customize and click on WP Mega Menu Pro button that appears. Then, configure the categories as per your requirement.

Wrapping Up

This way, you can upgrade the default WordPress menu into a multidimensional mega menu. So, if you want to add a mega menu on your WordPress website then, you can use this plugin and follow the step by step tutorial.

You can also checkout the collection of:

7+ Best WordPress Mega Menu Plugins (for better website navigation)

5+ Best Free WordPress Mega Menu Plugins (Handpicked Collection)