How to Create a Mega Menu with Rich Media

Mega Menus allow you to add multi-column drop down menus to your navigation with rich media such as images and videos. The following procedures show you how to easily add a mega menu to your site.

Prerequisites

This tutorial assumes that you have already created a navigation menu and set it the primary menu. For more information, see Creating the Primary Menu.

Step 1: Create a mega menu item

1. Log into your WordPress site administration panel.
2. Navigate to Appearance > Menus.
3. In the Menu Structure panel, expand your menu item by clicking the arrow on the right.
4. For CSS Classes, Type megamenu.

Step 2: Create drop-down menus

1. Click create a new menu, type a name for the menu, in this example, type shop column 1, then click Create Menu.
2. Add some menu items to the menu shop column 1, then click Save menu.
3. Repeat the procedure to create two more drop-down menus, shop column 2 and shop column 3.

Step 3: Add drop-down menus to the mega menu

1. Navigate to Appearance > Widgets, expand the mega menu panel created in previous step, in this example, expand Shop – Mega Menu.
2. Under Available Widgets, choose Navigation Menu, add it to Shop – Mega Menu.
3. In the settings panel of Navigation Menu, for Select Menu, select shop column 1.
4. Repeat the procedure to add two more Navigation Menu and select menu shop column 2 and shop column 3 respectively.
5. At last, add an Image widget, this will be the fourth column of your mega menu.