How to Add a Stunning Mega Menu to Your WordPress Site
How to Add a Stunning Mega Menu to Your WordPress Site
Mega menus are a common design pattern on large WordPress sites. Such sites may have a complex information architecture with many different sections and subsections. By grouping similar links together, mega menus make it simple for the user to find relevant information quickly.
“[Mega menus] are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.”
In this post, we’ll take a look at examples of WordPress sites that using mega menus, why they are worth exploring as an option if you run a large website, and plugins to help you implement mega menus.
WordPress Sites That Use Mega Menus Effectively
Mega menus are found on a wide variety of sites.
The mega menu items on the Joani Clothing website link to WooCommerce product categories.
The Stanford Daily news site uses a mega menu to display categories within categories, i.e. Sports > Fall Sports > Field Hockey.
PinkPage’s mega menu includes images that link to special deals and promotions.
Feature images are also used in Pousta’s mega menu, along the site to highlight important stories.
The alumni menu items on the Georgia State University website are custom links to another domain.
The most mega of mega menus! Jamie Oliver’s site includes a separate hamburger menu for tablet and mobile.
What Features Can WordPress Mega Menus Contain?
As well as menu links, they can have:
- Section headings
- Widgets, which can include images or video
Most mega menus are shown on hover, hover intent, or click from horizontal menu bars. Some plugins can do vertical mega menus as well.
Hover intent is a jQuery plugin that attempts to intuit the user’s meaning of a mouse move. So a quick drag may not open the menu whereas a slow deliberate move over a menu item will.
Mega Menus WordPress Plugins
There are a number of free and paid plugins that do the job well if you’re considering adding a mega menu to your WordPress site.
- Accessibility friendly: keyboard navigation is supported.
- Animations for submenu transitions.
- Options to hide menu items or disable links.
- Premium version with more features including vertical and accordion menus.
- Vertical mega menus.
- Create menus by drag and drop.
- Option to hide menus on mobile.
- Fade or slide transitions.
- Premium version available with more features e.g more icons and add your own icons.
- Drag and drop configuration.
- Google Fonts support.
- Menus can be saved by profile for reuse on another WordPress theme.
- Live preview.
- Custom CSS support.
- Tabbed submenus.
- Dynamically generated menus.
- Mobile and tablet friendly menus.
- Menu animations.
- 1600+ icons.
- WPML compatible.
- Add other menu items (logo, search).
- Tabbed mega menu.
- 14 available skins.
- WooCommerce enabled.
- Backgrounds for menus.
- Sticky menu.
- Transparent menus.
- Save/load presets.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
- Embed videos.
- WooCommerce support.
- Save/load presets.
How to Create a Mega Menu with Max Mega Menu
Let’s take a look at how to create a mega menu. For this example, I created a food-based site with different recipes using the Kale theme.
The first step is to create your menu using Appearance > Menus, making sure you nest your submenu items appropriately.
Mega menus can only be created on top level menu items, not submenu items. To access the plugin’s options for menus, hover over a menu item and select Mega Menu.
To add images, use an Image widget – a new feature in WordPress 4.8.
And here’s what it looks like on the front-end of my test website:
To add videos, use WordPress 4.8’s Video widget and add the video from a URL. Alternatively, add the embed code of the video to a text widget.
Here’s what it looks like:
You can also add menu icons through the Icon section in the plugin.
To add Font Awesome, Genericons or custom icons requires the Pro version, which costs $23 for a single site.
You can choose the number of columns that menus display in and create multi-column layouts grouping items together.
After putting together a two-column layout, here are the results on the front-end:
I used the Recent Posts Widget With Thumbnails plugin to add the latest posts. To get them to line up horizontally, I used a widget in a one column layout plus some CSS. The only reason the images don’t line up perfectly is because they’re different heights!
Here’s the CSS I used to achieve this result:
And another look at how my mega menu is coming along on the front-end of my test site, this time with three columns:
Adding or changing items in your mega menu auto-saves them. Don’t forget to click Save Menu as well if you add new items to the menu structure.
Using Max Mega Menu for Tablet and Mobile
On my phone, I ended up with two hamburger menus, one from my theme and the one generated by Max Mega Menu. The theme menu was disabled, so it would best hidden with CSS.
As there is no hover state, hover and hover intent events work as click events, with a tap opening the submenu.
Top-level menu items with mega menus as submenus (e.g. Main courses) can’t be accessed on a phone unless the user taps and holds and chooses Open in new tab.
One way to solve this is to use another plugin for a mobile only menu.
Max Mega Menu didn’t display everything optimally on mobile. I changed down the number of columns from two to one but that had the effect of mixing up the content on my Soups menu, as shown.
The Video widget didn’t show properly either. There’s a problem with its responsiveness on a small screen size.
How to Create a Mega Menu with UberMenu
UberMenu gives much finer grained control over your mega menus. Each single menu item can be customized. There is also a global control panel where some options can be set and inherited e.g. default image sizes.
There are over 20 inbuilt skins. I chose “Simple Green.”
The individual item controls are:
- General – various settings including choice of text alignment and adding CSS class or ID.
- Icon – set an icon to show with the menu. For the full range you need the UberMenu Icons Extension ($8).
- Image – any image that will be shown adjacent to your menu item.
- Layout – choose the column display and position of any images used.
- Submenu – configure the submenu display.
- Custom Content – add HTML and shortcodes quickly without using a widget.
- Widgets – insert widget areas into menus and choose the number of columns.
- Customize Style – select colors and padding for different menu items.
- Responsive – hide or disable the menu at different breakpoints.
- Deprecated – you can safely ignore this if you are a new user.
Cool Things You Can Do with UberMenu Advanced Items
#1. Creating a submenu for a Contact page with a Google Map and a contact form
I achieved this by using the Widget Area item set to a two column layout. The two widgets were added to a named UberMenu widget area in Appearance > Widgets.
#2. Creating a custom two column layout
I achieved this with Column items for my Soups submenu.
#3. Adding the last three blog posts under “Blog”
This was much easier than doing the same in Max Mega Menu as I was able to choose an automatic three column layout. The “Dynamic Posts” item has some advanced WP Query built-in. Had I wanted to, I could have filtered by category, changed the sort order or excluded posts.
#4. Using a tabbed submenu
Leaving aside the food theme, I installed WooCommerce and its dummy data.
Here’s the menu setup for my shop, using the tabs block.
I adjusted the number of dynamic posts for each product category to fit the submenu gracefully.
Using UberMenu for Tablet and Mobile
On my phone, I found that tapping a top-level menu item once opened the submenu while tapping it again opened that page. It was beneficial that the user could access the top-level menu items, though I found that particular menu behavior slightly unexpected.
Each submenu has a Close link at the bottom to close it.
My column layouts were retained for my Soups submenu.
However, I continued to have problems with the Video widget working in a column layout. A Custom Content item with the embed code for the video worked better, but was cut off on mobile.
The tabbed interface went from horizontal tabs on desktop to vertical tabs on mobile.
Are Mega Menus for Everyone?
Mega menus are powerful and work well for certain industries such as current affairs, education, and ecommerce.
They can be a good way to:
- Highlight product categories and sale items for online shops.
- Make users aware of less obvious sections of a site and explain their purpose.
- Show featured images for posts or product photos.
But they’re not suitable for every type of site. If you have a small and simple site using a mega menu will be overkill.
As you’ve seen, mega menu behavior on mobile needs to be checked carefully to avoid display and interaction problems. Plus large menus may not be desirable for mobile devices.
There are also potential SEO issues with mega menus – too many links can result in a dilution of “link juice.”
Finally, mega menus which disappear too quickly when users attempt to interact with them are a no-no.
Whatever approach you take, it’s important to plan out your site navigation logically and avoid the user having to make too many clicks to reach their intended goal.
You should also:
- Have a visible search box on every page.
- List out child pages on your top-level pages.
- Consider using a sitemap.