Mega Menus are a common design pattern on large WordPress sites. They allow you to add multi-column drop down menus to your navigation with rich media such as images and videos. In this article, we will show you how to effortlessly add a mega menu to your WordPress site.
Why and Who Should Add Mega Menu in WordPress?
Websites with plenty of content to display need Mega Menus. With the help of Mega Menu the website owner can display more items in their top menus.
These mega menu help display categories within categories, it can include images that link to deals and promotions or use feature images to highlight important stories. Websites like Starbucks, PagePink & Buzzfeed employ Mega menu for an interactive user interface.
Although the default setting in WordPress Navigations lets you add drop-down sub-menus and even add image icons next to each item, you may occasionally need a mega menu.
Refer to below guide on adding a mega menu to your WordPress website.
Adding a Mega Menu in WordPress
To begin with you need to install and activate the Max mega Menu plug-in. It is one of best and free WordPress plug-in available hands down in the market.
Once activated, the plug-in will add a new menu item, i.e. Mega Menu, to your WordPress admin menu. Just with a click you will reach the plug-in’s settings page.
Its default setup will work for most of the websites. You will need to change the menu colors to match the colors used by your WordPress theme’s navigation menu container.
Use the Inspect Tool in your browser to find out the color used in your theme.
Once you obtain the color hex code, paste it in a text file for later use.
Subsequently, go to mega menu setting page and click on the ‘Menu Themes’ tan and then click on ‘Menu Bar’ section.
Now you can exchange the background color used by mega menu to match your theme’s navigation menu container.
Don’t forget to store your changes, click on the save changes button.
Once you have configured the mega menu settings, let’s create your own mega menu.
To add top level items to your navigation, browse through Appearance>> Menus page.
Next, to enable mega menu on the Menus screen, mark the box under ‘Max Mega Menu Settings’.
Browse to a menu item and a ‘Mega Menu’ button will appear on the menu tab.
By clicking on the button it will bring up a popup. Here you can select number of columns you want to display as well as you can add any WordPress widget to your mega menu.
By clicking on the wrench icon on a widget you can edit the widget settings. Store all your widget settings by clicking on save button.
Once the changes are done, close the popup and visit your website to see the mega menu in action.
Here we are done! Hope our step by step guide is helpful and allows you to successfully add a mega menu in WordPress.
