How to Create a Mega Menu for Your WordPress Website

Mega Menu is an effective menu solution for any WordPress website which needs complicated and content-rich menu navigation, especially eCommerce websites. Fortunately, we can use a plugin to create a mega menu for your website.

Using WR Mega Menu

Below, I will guide you through creating a mega menu by using a free WordPress plugin: WR Mega Menu in only 3 simple steps:

Step 1: Install WR Mega Menu

Install

Like other plugins' installation progress, you can go to Plugins -> Add New -> Upload plugin, then upload the zip file from Woorockets.com or search for WR Mega Menu in the Search plugins box, install it to your WordPress website and then activate the plugin. When the installation is successful, you are welcomed by this interface:

Interface

Step 2: Create A Default WordPress Menu

Notes:

The menu will display in your homepage. Make sure you create your menu structure to neatly fit your website and keep it easy to navigate since the menu will be the guide for your website’s visitors.

This step is compulsory since the WR Mega menu plugin only allows you to customize pre-made menus created in the WordPress menu.

In the WordPress Admin panel, go to Appearance -> Menus and start editing your menu here.

Appearance - Menus

This menu will be automatically assigned to WR Mega Menu. You can build up more than one menu and easily switch among them.

WR Mega Menu also allows you to choose from those menus to customize.

In the Menus tab, type your menu name in the Menu name box and press Create Menu. If you have more than one menu, this step will save you time in browsing the one you need.

Create Menu

After creating a menu, in the Menu Structure options, you can add unlimited menu items from the left column. In the screenshot below, I have WooCommerce installed with some pre-created pages like My Account, Checkout, Cart…

Pages

Similarly, you can also add Categories or Links to your menu.

In the Links box, you can add menu items with URL links to specific a location within your website.

Type your menu item name in the box then click Add to Menu.

Add Links

Menu Settings controls how your menu will appear in the front-end. The menu’s positions will depend on the theme you’re using for your website.

In this case, as I use the Twenty Fourteen theme so I have Top primary menu and Secondary menu in the left side bar to select from.

Select Menu Position

With simple drag and drop, you can easily create submenu items and arrange them in the way you want.

Add Submenu Items

You can also select an icon for each menu item and sub menu item from nearly 150 icons available.

The selected icon here will display in WR Mega Menu when you select button Icon Only or Icon vs Text.

Add Icon

When editing is done, remember to click Save Menu before moving to the next step.

Step 3: Create Mega Menu with WR Mega Menu

Go to WR Mega Menu -> Add new then type your menu title in the box. You can also go to WR Mega Menu and then click Add new button in the top of the page:

Add New Profile

Then click ‘Turn on’ WR Mega Menu to start customization.

After turning on WR Mega Menu, the editing fields will appear like this:

Editing Fields

Edit row and column:

Edit Row and Column

WR Mega Menu allows you to add unlimited rows and a maximum of 12 columns for each row. You also can control the size of each column and row by drag-and-drop action.

There are several pre-designed columns in the WR Mega Menu with specific ratios to choose from.

However, always remember to keep your menu simple and easy for your website visitors.

Add elements:
Note: WR Mega Menu provides Standard elements and Widget elements. These 2 types of elements have the similar editing progress.

In this tutorial, I will guide you through how to manage with Standard elements and you can apply the same steps with Widget elements to build your own mega menu.

You can add built-in elements for both rows and columns.

Add Image element:

In the Content tab:

Upload your image to Image elements and then adjust Alt Text, Caption and link type of image on On Click option.

You can preview your image in the Preview window right next to it.

Image Settings Content

In the Appearance tab:

You can edit your image with several options: Container style, Alignment, customize Margin or add Fade in Animations.

Image Settings Appearance

If you know about coding, you can overwrite custom CSS class and ID to get what you want in the Advanced option:

Advanced

Add Text element:

You can easily edit text in the WordPress editor in the Content tab.

Content

In the Appearance tab, you can set Margin, enable Dropcap, adjust line height for the text and customize CSS in the Advanced option.

WP Appearance

For example, I customized image and text for Home item in mega menu and this is how it displays in the front-end:

Customization Example

Add Submenu element:

Note: You can only add Submenu to pre-made menus which contain sub items.

In the Content tab:

You can add all submenus or select several ones to customize in the Appearance tab.

Submenu Content

With the same process with other 2 elements above, the Appearance tab in Submenu allows you to adjust Column breaking or customize CSS in the Advanced option.

Submenu Appearance

In addition, by clicking the Styling button on top of the WR Mega Menu editing field, you can easily set customization for Menu bar and Submenu Panel. You can set an icon and text in the Menu Bar tab and adjust the Submenu Panel as you desire. You can also adjust images or text to make your submenus more lively and beautiful. Everything is under your control:

Styling

For example, Shop mega menu contains 3 submenus: Lookbook, For She and For He along with text and images.

Submenus Example

Wrapping Up

I hope this tutorial is useful for you to build your own mega menu easily. If you need any further help while configuring your Mega Menu, feel free to ask in the comments section below. You are always welcome.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.