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
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:
Step 2: Create A Default WordPress Menu
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.
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.
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…
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.
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.
With simple drag and drop, you can easily create submenu items and arrange them in the way you want.
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.
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:
Then click ‘Turn on’ WR Mega Menu to start customization.
After turning on WR Mega Menu, the editing fields will appear like this:
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.
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.
In the Appearance tab:
You can edit your image with several options: Container style, Alignment, customize Margin or add Fade in Animations.
If you know about coding, you can overwrite custom CSS class and ID to get what you want in the Advanced option:
Add Text element:
You can easily edit text in the WordPress editor in the Content tab.
In the Appearance tab, you can set Margin, enable Dropcap, adjust line height for the text and customize CSS in the Advanced option.
For example, I customized image and text for Home item in mega menu and this is how it displays in the front-end:
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.
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.
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:
For example, Shop mega menu contains 3 submenus: Lookbook, For She and For He along with text and images.
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.