{"id":165937,"date":"2017-07-02T13:00:05","date_gmt":"2017-07-02T13:00:05","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=165937"},"modified":"2022-03-22T03:27:20","modified_gmt":"2022-03-22T03:27:20","slug":"mega-menu-wordpress","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/mega-menu-wordpress\/","title":{"rendered":"How to Add a Stunning Mega Menu to Your WordPress Site"},"content":{"rendered":"<p>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.<\/p>\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/mega-menus-work-well\/\" target=\"_blank\">About mega menus, usability expert Jakob Nielsen says<\/a>:<\/p>\n<blockquote><p>&#8220;[Mega menus] are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.&#8221;<\/p><\/blockquote>\n<p>In this post, we&#8217;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.<\/p>\n<ul>\n<li><a href=\"#sites-that-use\">WordPress Sites That Use Mega Menus Effectively<\/a><\/li>\n<li><a href=\"#features\">What Features Can WordPress Mega Menus Contain?<\/a><\/li>\n<li><a href=\"#plugins\">Mega Menus WordPress Plugins<\/a>\n<ul>\n<li><a href=\"#max-mega\">Max Mega Menu (free)<\/a><\/li>\n<li><a href=\"#ap-mega\">Mega Menu Plugin for WordPress \u2013 AP Mega Menu (free)<\/a><\/li>\n<li><a href=\"#ubermenu\">UberMenu<\/a><\/li>\n<li><a href=\"#mega-main\">Mega Main Menu<\/a><\/li>\n<li><a href=\"#wp-mega\">WP Mega Menu Pro<\/a><\/li>\n<li><a href=\"#hero\">Hero Menu<\/a><\/li>\n<li><a href=\"#noo\">NOO Menu<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#how-to-max-mega\">How to Create a Mega Menu with Max Mega Menu<\/a>\n<ul>\n<li><a href=\"#max-mobile\">Using Max Mega Menu for Tablet and Mobile<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#how-to-ubermenu\">How to Create a Mega Menu with UberMenu<\/a>\n<ul>\n<li><a href=\"#ubermenu-advanced\">Cool Things You Can Do with UberMenu Advanced Items<\/a><\/li>\n<li><a href=\"#ubermenu-mobile\">Using UberMenu for Tablet and Mobile<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#everyone\">Are Mega Menus for Everyone?<\/a><\/li>\n<\/ul>\n<h2 id=\"sites-that-use\">WordPress Sites That Use Mega Menus Effectively<\/h2>\n<p>Mega menus are found on a wide variety of sites.<\/p>\n<h3><a href=\"https:\/\/joanieclothing.com\/\" target=\"_blank\">Joanie Clothing<\/a><\/h3>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Joanie-Clothing-mega-menu-1050px.png\" alt=\"Joanie Clothing Shop All mega menu\" width=\"1050\" height=\"520\" \/><figcaption class=\"wp-caption-text\">Joanie Clothing Shop All mega menu<\/figcaption><\/figure>\n<\/div>\n<p>The mega menu items on the Joani Clothing website link to WooCommerce product categories.<\/p>\n<h3><a href=\"http:\/\/www.stanforddaily.com\/\" target=\"_blank\">The Stanford Daily<\/a><\/h3>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/The-Stanford-Daily-mega-menu-1050px.png\" alt=\"The Stanford Daily Sports mega menu\" width=\"1050\" height=\"475\" \/><figcaption class=\"wp-caption-text\">The Stanford Daily Sports mega menu<\/figcaption><\/figure>\n<\/div>\n<p>The Stanford Daily news site uses a mega menu to display categories within categories, i.e. Sports &gt; Fall Sports &gt; Field Hockey.<\/p>\n<h3><a href=\"https:\/\/pousta.com\/\" target=\"_blank\">Pousta<\/a><\/h3>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Pousta-mega-menu-1050px.png\" alt=\"Pousta Singular mega menu\" width=\"1050\" height=\"514\" \/><figcaption class=\"wp-caption-text\">Pousta Singular mega menu<\/figcaption><\/figure>\n<\/div>\n<p>Feature images are also used in Pousta&#8217;s mega menu, along the site to highlight important stories.<\/p>\n<h3><a href=\"http:\/\/www.gsu.edu\/\" target=\"_blank\">Georgia State University<\/a><\/h3>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Georgia-State-University-mega-menu-1050px.png\" alt=\"Georgia State University Alumni mega menu\" width=\"1050\" height=\"504\" \/><figcaption class=\"wp-caption-text\">Georgia State University Alumni mega menu<\/figcaption><\/figure>\n<\/div>\n<p>The alumni menu items on the Georgia State University\u00a0website are custom links to another domain.<\/p>\n<h3><a href=\"http:\/\/www.jamieoliver.com\/\" target=\"_blank\">Jamie Oliver<\/a><\/h3>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Jamie-Oliver-mega-menu-1050px.png\" alt=\"Jamie Oliver Recipes mega menu\" width=\"1050\" height=\"591\" \/><figcaption class=\"wp-caption-text\">Jamie Oliver Recipes mega menu<\/figcaption><\/figure>\n<\/div>\n<p>The most mega of mega menus! Jamie Oliver&#8217;s site includes a separate hamburger menu for tablet and mobile.<\/p>\n<h3><a href=\"https:\/\/www.britishrowing.org\/\" target=\"_blank\">British Rowing<\/a><\/h3>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/British-Rowing-mega-menu-1050px.png\" alt=\"British Rowing Knowledge mega menu\" width=\"1050\" height=\"490\" \/><figcaption class=\"wp-caption-text\">British Rowing Knowledge mega menu<\/figcaption><\/figure>\n<\/div>\n<h2 id=\"features\">What Features Can WordPress Mega Menus Contain?<\/h2>\n<p>As well as menu links, they can have:<\/p>\n<ul>\n<li>Section headings<\/li>\n<li>Images<\/li>\n<li>Icons<\/li>\n<li>Descriptions<\/li>\n<li>Widgets, which can include images or video<\/li>\n<\/ul>\n<p>Most mega menus are shown on hover, hover intent, or click from horizontal menu bars. Some plugins can do vertical mega menus as well.<\/p>\n<p><a href=\"https:\/\/github.com\/briancherne\/jquery-hoverIntent\" target=\"_blank\">Hover intent<\/a> is a jQuery plugin that attempts to intuit the user\u2019s meaning of a mouse move. So a quick drag may not open the menu whereas a slow deliberate move over a menu item will.<\/p>\n<h2 id=\"plugins\">Mega Menus WordPress Plugins<\/h2>\n<p>There are a number of free and paid plugins that do the job well if you&#8217;re considering adding a mega menu to your WordPress site.<\/p>\n<h3 id=\"max-mega\" class=\"wpdui-tutorial-list__item__title\">Max Mega Menu (free)<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-207659\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/07\/max-mega-menu.png\" alt=\"max mega menu header\" width=\"600\" height=\"190\" \/><\/div>\n<\/div>\n<p>The <a href=\"https:\/\/www.megamenu.com\/\" target=\"_blank\">Max Mega Menu<\/a> features include:<\/p>\n<ul>\n<li>Accessibility friendly: keyboard navigation is supported.<\/li>\n<li>Animations for submenu transitions.<\/li>\n<li>Options to hide menu items or disable links.<\/li>\n<li>Premium version with more features including vertical and accordion menus.<\/li>\n<\/ul>\n<h3 id=\"ap-mega\" class=\"wpdui-tutorial-list__item__title\">Mega Menu Plugin for WordPress \u2013 AP Mega Menu (free)<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-207660\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/07\/AP-Mega-Menu.png\" alt=\"Mega Menu header\" width=\"600\" height=\"190\" \/><\/div>\n<\/div>\n<p>The Mega Menu Plugin features include:<\/p>\n<ul>\n<li>Vertical mega menus.<\/li>\n<li>Create menus by drag and drop.<\/li>\n<li>Option to hide menus on mobile.<\/li>\n<li>Fade or slide transitions.<\/li>\n<li>Premium version available with more features e.g more icons and add your own icons.<\/li>\n<\/ul>\n<h3 id=\"ubermenu\" class=\"wpdui-tutorial-list__item__title\">UberMenu<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-207661\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/07\/ubermenu.png\" alt=\"UberMenu header.\" width=\"600\" height=\"307\" \/><\/div>\n<\/div>\n<section class=\"wpdui-tutorial-list__item__content\"><a href=\"https:\/\/codecanyon.net\/item\/ubermenu-wordpress-mega-menu-plugin\/154703\" target=\"_blank\">UberMenu<\/a> features include:<\/p>\n<ul>\n<li>Tabbed submenus.<\/li>\n<li>Dynamically generated menus.<\/li>\n<li>Mobile and tablet friendly menus.<\/li>\n<li>Menu animations.<\/li>\n<\/ul>\n<h3 id=\"mega-main\" class=\"wpdui-tutorial-list__item__title\">Mega Main Menu<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-207662\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/07\/mega-main-menu.png\" alt=\"mega main menu header\" width=\"600\" height=\"307\" \/><\/div>\n<\/div>\n<p><a href=\"https:\/\/codecanyon.net\/item\/mega-main-menu-wordpress-menu-plugin\/6135125\" target=\"_blank\">Mega Main Menu<\/a> features include:<\/p>\n<ul>\n<li>1600+ icons.<\/li>\n<li>WPML compatible.<\/li>\n<li>Add other menu items (logo, search).<\/li>\n<\/ul>\n<h3 id=\"wp-mega\" class=\"wpdui-tutorial-list__item__title\">WP Mega Menu Pro<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-207663\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/07\/WP-Mega-Menu-Pro.png\" alt=\"wp mega menu pro\" width=\"600\" height=\"307\" \/><\/div>\n<\/div>\n<p>WP <a href=\"https:\/\/mythemeshop.com\/plugins\/wp-mega-menu\/\" target=\"_blank\">Mega Menu Pro<\/a> features include:<\/p>\n<ul>\n<li>Tabbed mega menu.<\/li>\n<li>14 available skins.<\/li>\n<\/ul>\n<h3 id=\"hero\" class=\"wpdui-tutorial-list__item__title\">Hero Menu<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-207664\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/07\/hero-menu.png\" alt=\"Hero Menu\" width=\"600\" height=\"307\" \/><\/div>\n<\/div>\n<p><a href=\"https:\/\/codecanyon.net\/item\/hero-menu-responsive-wordpress-mega-menu-plugin\/10324895\" target=\"_blank\">Hero Menu<\/a> features include:<\/p>\n<ul>\n<li>WooCommerce enabled.<\/li>\n<li>Backgrounds for menus.<\/li>\n<li>Sticky menu.<\/li>\n<\/ul>\n<h3 id=\"noo\" class=\"wpdui-tutorial-list__item__title\">NOO Menu<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-207665\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/07\/NOO-Menu-.png\" alt=\"Noo Menu header\" width=\"600\" height=\"307\" \/><\/div>\n<\/div>\n<p><a href=\"https:\/\/codecanyon.net\/item\/noo-menu-wordpress-mega-menu-plugin\/7873697\" target=\"_blank\">NOO Menu<\/a> features include:<\/p>\n<ul>\n<li>Transparent menus.<\/li>\n<li>Save\/load presets.<\/li>\n<\/ul>\n<\/section>\n<hr \/>\n<h2 id=\"how-to-max-mega\">How to Create a Mega Menu with Max Mega Menu<\/h2>\n<p>Let&#8217;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 <a href=\"https:\/\/wordpress.org\/themes\/kale\/\" target=\"_blank\">Kale theme<\/a>.<\/p>\n<p>The first step is to create your menu using <strong>Appearance &gt; Menus<\/strong>, making sure you nest your submenu items appropriately.<\/p>\n<p>Mega menus can only be created on top level menu items, not submenu items. To access the plugin\u2019s options for menus, hover over a menu item and select <strong>Mega Menu<\/strong>.<\/p>\n<p>To add images, use an Image widget \u2013 a new feature in WordPress 4.8.<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Max-Mega-Menu-image-widget-1050px.png\" alt=\"A Max Mega Menu image widget\" width=\"1050\" height=\"554\" \/><figcaption class=\"wp-caption-text\">A Max Mega Menu image widget<\/figcaption><\/figure>\n<\/div>\n<p>And here&#8217;s what it looks like on the front-end of my test website:<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Max-Mega-Menu-with-image-1050px.png\" alt=\"Max Mega Menu with image on the front end\" width=\"1050\" height=\"264\" \/><figcaption class=\"wp-caption-text\">Max Mega Menu with image on the front end<\/figcaption><\/figure>\n<\/div>\n<p>To add videos, use WordPress 4.8\u2019s Video widget and add the video from a URL. Alternatively, add the embed code of the video to a text widget.<\/p>\n<p>Here&#8217;s what it looks like:<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Max-Mega-Menu-with-video-1050px.png\" alt=\"Max Mega Menu with video\" width=\"1050\" height=\"322\" \/><figcaption class=\"wp-caption-text\">Max Mega Menu with video<\/figcaption><\/figure>\n<\/div>\n<p>You can also add menu icons through the Icon section in the plugin.<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Max-Mega-Menu-default-icons-1050px.png\" alt=\"The default Dashicons in Max Mega Menu\" width=\"1050\" height=\"554\" \/><figcaption class=\"wp-caption-text\">The default Dashicons in Max Mega Menu<\/figcaption><\/figure>\n<\/div>\n<p>To add Font Awesome, Genericons or custom icons requires the Pro version, which costs $23 for a single site.<\/p>\n<p>You can choose the number of columns that menus display in and create multi-column layouts grouping items together.<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Max-Mega-Menu-columns-1050px.png\" alt=\"Max Mega Menu 2 column layout\" width=\"1050\" height=\"556\" \/><figcaption class=\"wp-caption-text\">Max Mega Menu 2 column layout<\/figcaption><\/figure>\n<\/div>\n<p>After putting together a two-column layout, here are the results on the front-end:<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Max-Mega-Menu-columns-front-end-1050px.png\" alt=\"Max Mega Menu 2 column layout for Soups submenu\" width=\"1050\" height=\"565\" \/><figcaption class=\"wp-caption-text\">Max Mega Menu 2 column layout for Soups submenu<\/figcaption><\/figure>\n<\/div>\n<p>I used the <a href=\"https:\/\/wordpress.org\/plugins\/recent-posts-widget-with-thumbnails\/\" target=\"_blank\">Recent Posts Widget With Thumbnails<\/a> 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\u2019t line up perfectly is that they\u2019re different heights!<\/p>\n<p>Here&#8217;s the CSS I used to achieve this result:<\/p>\n<div class=\"gist\" data-gist=\"14bb5f141b027bb751bff13d6a886db2\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/14bb5f141b027bb751bff13d6a886db2.js\">Loading gist 14bb5f141b027bb751bff13d6a886db2<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>And another look at how my mega menu is coming along on the front-end of my test site, this time with three columns:<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Recent-posts-widget-with-thumbnails-1050px.png\" alt=\"Latest posts in a 3 column layout\" width=\"1050\" height=\"336\" \/><figcaption class=\"wp-caption-text\">Latest posts in a three column layout<\/figcaption><\/figure>\n<\/div>\n<p>Adding or changing items in your mega menu auto-saves them. Don\u2019t forget to click\u00a0<strong>Save Menu<\/strong> as well if you add new items to the menu structure.<\/p>\n<h3 id=\"max-mobile\">Using Max Mega Menu for Tablet and Mobile<\/h3>\n<p>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.<\/p>\n<p>As there is no hover state, hover and hover intent events work as click events, with a tap opening the submenu.<\/p>\n<p>Top-level menu items with mega menus as submenus (e.g. Main courses) can\u2019t be accessed on a phone unless the user taps and holds and chooses <strong>Open in new tab<\/strong>.<\/p>\n<p>One way to solve\u00a0this is to <a href=\"https:\/\/www.megamenu.com\/documentation\/configuring-mobile-menu-plugins\/\" target=\"_blank\">use another plugin for a mobile only menu<\/a>.<\/p>\n<p>Max Mega Menu didn\u2019t 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.<\/p>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Max-Mega-Menu-on-Android-phone-with-mixed-up-columns-420px.png\" alt=\"Max Mega Menu on Android phone with mixed up columns\" width=\"271\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Max Mega Menu on Android phone with mixed up columns<\/figcaption><\/figure>\n<\/div>\n<p>The Video widget didn&#8217;t show properly either. There&#8217;s a problem with its responsiveness on a small screen size.<\/p>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Video-widget-display-on-Android-phone-420px.png\" alt=\"Video widget display cut off on Android phone\" width=\"272\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Video widget display cut off on Android phone<\/figcaption><\/figure>\n<\/div>\n<hr \/>\n<h2 id=\"how-to-ubermenu\">How to Create a Mega Menu with UberMenu<\/h2>\n<p>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.<\/p>\n<p>There are over 20 inbuilt skins. I chose &#8220;Simple Green.&#8221;<\/p>\n<p>The individual item controls are:<\/p>\n<ul>\n<li><strong>General<\/strong> &#8211; various settings including choice of text alignment and adding CSS class or ID.<\/li>\n<li><strong>Icon<\/strong> &#8211; set an icon to show with the menu. For the full range you need the UberMenu Icons Extension ($8).<\/li>\n<li><strong>Image<\/strong> &#8211; any image that will be shown adjacent to your menu item.<\/li>\n<li><strong>Layout<\/strong> &#8211; choose the column display and position of any images used.<\/li>\n<li><strong>Submenu<\/strong> &#8211; configure the submenu display.<\/li>\n<li><strong>Custom Content<\/strong> &#8211; add HTML and shortcodes quickly without using a widget.<\/li>\n<li><strong>Widgets<\/strong> &#8211; insert widget areas into menus and choose the number of columns.<\/li>\n<li><strong>Customize Style<\/strong> &#8211; select colors and padding for different menu items.<\/li>\n<li><strong>Responsive<\/strong> &#8211; hide or disable the menu at different breakpoints.<\/li>\n<li><strong>Deprecated<\/strong> &#8211; you can safely ignore this if you are a new user.<\/li>\n<\/ul>\n<h3 id=\"ubermenu-advanced\">Cool Things You Can Do with UberMenu Advanced Items<\/h3>\n<h4>#1. Creating a submenu for a Contact page with a Google Map and a contact form<\/h4>\n<p>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 <strong>Appearance &gt; Widgets<\/strong>.<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/Mega-menu-with-Google-map-and-Contact-form-1050px.png\" alt=\"UberMenu widget with Google map and Contact form\" width=\"1050\" height=\"521\" \/><figcaption class=\"wp-caption-text\">UberMenu widget with Google map and Contact form<\/figcaption><\/figure>\n<\/div>\n<h4>#2. Creating a custom two column layout<\/h4>\n<p>I achieved this with Column items for my Soups submenu.<\/p>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/UberMenu-soups-submenu-with-Columns-420px.png\" alt=\"UberMenu Soups submenu using Columns\" width=\"420\" height=\"345\" \/><figcaption class=\"wp-caption-text\">UberMenu Soups submenu using Columns<\/figcaption><\/figure>\n<\/div>\n<h4>#3. Adding the last three blog posts under &#8220;Blog&#8221;<\/h4>\n<p>This was much easier than doing the same in Max Mega Menu as I was able to choose an automatic three column layout. The &#8220;Dynamic Posts&#8221; 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.<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/UberMenu-Blog-with-Dynamic-Posts-1050px.png\" alt=\"UberMenu 3 column Blog with Dynamic Posts\" width=\"1050\" height=\"309\" \/><figcaption class=\"wp-caption-text\">UberMenu 3 column Blog with Dynamic Posts<\/figcaption><\/figure>\n<\/div>\n<h4>#4. Using a tabbed submenu<\/h4>\n<p>Leaving aside the food theme, I installed WooCommerce and its dummy data.<\/p>\n<p>Here\u2019s the menu setup for my shop, using the tabs block.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/UberMenu-setup-for-Shop-600px.png\" alt=\"UberMenu setup for Shop with Tabs\" width=\"600\" height=\"408\" \/><figcaption class=\"wp-caption-text\">UberMenu setup for shop with tabs<\/figcaption><\/figure>\n<\/div>\n<p>I adjusted the number of dynamic posts for each product category to fit the submenu gracefully.<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/UberMenu-shop-with-tabs-1050px.png\" alt=\"UberMenu shop with tabbed submenu\" width=\"1050\" height=\"253\" \/><figcaption class=\"wp-caption-text\">UberMenu shop with tabbed submenu<\/figcaption><\/figure>\n<\/div>\n<h3 id=\"ubermenu-mobile\">Using UberMenu for Tablet and Mobile<\/h3>\n<p>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.<\/p>\n<p>Each submenu has a <strong>Close<\/strong> link at the bottom to close it.<\/p>\n<p>My column layouts were retained for my Soups submenu.<\/p>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/UberMenu-Soups-submenu-on-Android-phone-420px.png\" alt=\"UberMenu Soups submenu on Android phone\" width=\"271\" height=\"420\" \/><figcaption class=\"wp-caption-text\">UberMenu Soups submenu on Android phone<\/figcaption><\/figure>\n<\/div>\n<p>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.<\/p>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/UberMenu-with-Custom-Content-embedded-video-on-Android-phone-420px.png\" alt=\"UberMenu with Custom Content embedded video on Android phone\" width=\"271\" height=\"420\" \/><figcaption class=\"wp-caption-text\">UberMenu with Custom Content embedded video on Android phone<\/figcaption><\/figure>\n<\/div>\n<p>The tabbed interface went from horizontal tabs on desktop to vertical tabs on mobile.<\/p>\n<div  class=\"wpdui-pic-small   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/06\/UberMenu-tabbed-submenu-Android-phone-420px.png\" alt=\"UberMenu tabbed submenu on Android phone\" width=\"246\" height=\"420\" \/><figcaption class=\"wp-caption-text\">UberMenu tabbed submenu on Android phone<\/figcaption><\/figure>\n<\/div>\n<h2 id=\"everyone\">Are Mega Menus for Everyone?<\/h2>\n<p>Mega menus are powerful and work well for certain industries such as current affairs, education, and ecommerce.<\/p>\n<p>They can be a good way to:<\/p>\n<ul>\n<li>Highlight <strong>product categories<\/strong> and<strong> sale items<\/strong> for online shops.<\/li>\n<li><strong>Make users aware<\/strong> of less obvious sections of a site and <strong>explain their purpos<\/strong>e.<\/li>\n<li><strong>Show featured images<\/strong> for posts or product photos.<\/li>\n<\/ul>\n<p>But they\u2019re not suitable for every type of site. If you have a small and simple site using a mega menu will be overkill.<\/p>\n<p>As you\u2019ve 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.<\/p>\n<p>There are also potential SEO issues with mega menus\u00a0\u2013 too many links can result in a dilution of &#8220;link juice.&#8221;<\/p>\n<p>Finally, mega menus which disappear too quickly when users attempt to interact with them are a no-no.<\/p>\n<p>Whatever approach you take, it\u2019s important to <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-navigation-menus\/\" target=\"_blank\">plan out your site navigation logically<\/a> and avoid the user having to make too many clicks to reach their intended goal.<\/p>\n<p>You should also:<\/p>\n<ol>\n<li>Have a visible search box on every page.<\/li>\n<li>List out child pages on your top-level pages.<\/li>\n<li>Consider using a sitemap.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>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. About mega menus, usability expert Jakob Nielsen says: &#8220;[Mega menus] are an [&hellip;]<\/p>\n","protected":false},"author":384374,"featured_media":166174,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4,263],"tags":[87,9802],"tutorials_categories":[],"class_list":["post-165937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","category-tutorials","tag-menus","tag-navigation"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/165937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/384374"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=165937"}],"version-history":[{"count":22,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/165937\/revisions"}],"predecessor-version":[{"id":224488,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/165937\/revisions\/224488"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/166174"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=165937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=165937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=165937"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=165937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}