{"id":9327,"date":"2020-07-15T15:00:15","date_gmt":"2020-07-15T13:00:15","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=9327"},"modified":"2020-11-13T13:34:58","modified_gmt":"2020-11-13T12:34:58","slug":"wordpress-mega-menu-tutorial","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-mega-menu-tutorial\/","title":{"rendered":"What is a WordPress Mega Menu and How to Add It to Your Site"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]<strong>Mega menus can be quite a useful addition to multi-layered websites that have a lot of content and require a rich type of navigation<\/strong>. They can help you improve your website\u2019s performance and overall user experience, in turn increasing the potential for more conversions. If you feel like this type of menu structure can also be of use to you, then read on as we explore the benefits of creating a WordPress mega menu and show how to add one to your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we will be covering:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-a-wordpress-mega-menu\">What is a WordPress Mega Menu?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#does-your-site-need-a-mega-menu\">Does Your Site Need a Mega Menu?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-mega-menu\">Adding a Mega Menu to Your WordPress Site<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-a-mega-menu-in-qode-themes\">Adding a Mega Menu in Qode themes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-a-wordpress-mega-menu\"><\/a>What is a WordPress Mega Menu?<\/h2>\n<p>[\/vc_column_text][vc_column_text]A WordPress mega menu is <strong>a drop-down, expandable type of navigation menu that appears when users hover over or click on an item in the menu bar<\/strong>. Most often, all related topics in this two-dimensional type of menu layout are grouped into categories for an easier browsing experience. The navigational content can be arranged both horizontally and vertically, and it can also be split into sections.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/1-BuzzFeed.jpg\" class=\"attachment-full size-full\" alt=\"BuzzFeed Mega Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/1-BuzzFeed.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/1-BuzzFeed-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/1-BuzzFeed-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A good example of a mega menu that opens on a click can be found on <a href=\"https:\/\/www.buzzfeed.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Buzzfeed<\/a>\u2019s website. Once a user clicks on the menu opener in the corner, a detailed mega menu will appear, uncovering menu items and sub-items grouped into different categories, such as Shopping, Lifestyle, Pop Culture, etc.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-Adidas.jpg\" class=\"attachment-full size-full\" alt=\"Adidas Mega Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-Adidas.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-Adidas-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/2-Adidas-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/www.adidas.com.au\/\" target=\"_blank\" rel=\"noopener noreferrer\">Adidas Official Website Australia<\/a> has a great example of a standard horizontal mega menu. Hovering over top-level navigation bar items (men, women, kids, etc.) triggers a dropdown with horizontally-arranged menu items. These items are further grouped into categories for better getting around, such as shoes, clothing, accessories, and so on.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Mega menus can even include rich-media types that further define or complement the content behind these menu links, like images or videos. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/3-Body-Shop.jpg\" class=\"attachment-full size-full\" alt=\"Body Shop Mega Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/3-Body-Shop.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/3-Body-Shop-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/3-Body-Shop-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.thebodyshop.com\/en-us\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Body Shop<\/a>\u2019s website features a good example of using rich media in the mega menu, specifically the clickable banners with images and CTAs.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Not only does a mega menu allow users a more detailed and better organized site navigation, but it is also <strong>a perfect opportunity to hint to certain areas of your website that would otherwise take a bit longer to find<\/strong>. As a result, users will be able to explore different pages of your website more quickly and efficiently, which can only lead to more conversions and less abandoned sessions.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, without further ado, let\u2019s see how you can add a mega menu in WordPress. We will show you an easy way to do it with the help of a Max Mega Menu plugin, and later, we\u2019ll also explain how you can create a mega menu if you\u2019re using one of <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\" target=\"_blank\" rel=\"noopener noreferrer\">Qode WordPress themes<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"does-your-site-need-a-mega-menu\"><\/a>Does Your Site Need a Mega Menu?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Even though mega menus can be extremely useful and help visitors navigate a website more easily, the fact of the matter is that not every website needs one. We\u2019ll go right ahead and say it \u2013 <strong>you shouldn\u2019t add a mega menu only because it seems like a cool thing to do<\/strong>. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]One of the main advantages of using a mega menu is that it allows you to display multiple links at once, all with the goal of making the navigation process faster, easier, and more user-friendly as a whole. So,<strong> if you\u2019re a big shop or a retail site with a lot of category items, or you offer a huge list of services and you think displaying them all in a mega menu would benefit your potential customers<\/strong> (and of course, your business), <strong>then by all means, you should add one<\/strong>. But if your website doesn\u2019t have that many links, then basic top-level menu navigation (for pages like Home, About, and Contact) with a few additional sub-items for your inner pages will more than likely be enough.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-a-mega-menu\"><\/a>How to Add a Mega Menu to Your WordPress Site<\/h2>\n<p>[\/vc_column_text][vc_column_text]When adding a mega menu to WordPress, we recommend using the <a href=\"https:\/\/wordpress.org\/plugins\/megamenu\/\" target=\"_blank\" rel=\"noopener noreferrer\">Max Mega Menu plugin<\/a> because it\u2019s quite easy to set up and use.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/4-Max-Mega-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Max Mega Menu plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/4-Max-Mega-Menu.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/4-Max-Mega-Menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/4-Max-Mega-Menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]First and foremost, you need to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install the plugin<\/a> and then activate it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019re done with the installation and activation process, you will see that a new menu item has been added to your WordPress admin, called <em>Mega Men<\/em>u. Click on it to access the plugin\u2019s <em>General Settings<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/5-Max-Mega-Menu-plugin-General-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Max Mega Menu plugin General Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/5-Max-Mega-Menu-plugin-General-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/5-Max-Mega-Menu-plugin-General-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/5-Max-Mega-Menu-plugin-General-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here, the plugin allows you to set certain options according to your preferences. The first thing you can define is the <em>Click Event Behavior<\/em> (i.e. what happens after the first and the second click on the menu). In the same way, you can set the <em>Mobile Menu Behavior<\/em>, (or the behavior of a submenu toggle on your mobile), decide where to save a <em>CSS Output<\/em>, enable output of <em>Menu Item Descriptions<\/em>, and so on.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/6-Click-Event-Behavior.jpg\" class=\"attachment-full size-full\" alt=\"Click Event Behavior\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/6-Click-Event-Behavior.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/6-Click-Event-Behavior-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/6-Click-Event-Behavior-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you\u2019re done setting these, you can move on to setting the menu colors. This is an important step, because <strong>your mega menu colors should match the navigation menu container of your WordPress theme<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Getting the exact colors used in your theme\u2019s menu container is simple \u2013 just <strong>right-click the navigation menu in your browser and then click <em>Inspect<\/em><\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/7-Right-click-and-then-click-Inspect.jpg\" class=\"attachment-full size-full\" alt=\"Right click and then click Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/7-Right-click-and-then-click-Inspect.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/7-Right-click-and-then-click-Inspect-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/7-Right-click-and-then-click-Inspect-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, simply copy the color hex code for the menu background and paste it in a simple text file so that you can use it later.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/8-Simply-copy-the-color-hex-code.jpg\" class=\"attachment-full size-full\" alt=\"Simply copy the color hex code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/8-Simply-copy-the-color-hex-code.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/8-Simply-copy-the-color-hex-code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/8-Simply-copy-the-color-hex-code-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then go back to the Max Mega Menu plugin settings page. Click the <em>Menu Themes<\/em> screen and then select the tab called <em>Menu Bar<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/9-Menu-Themes-screen.jpg\" class=\"attachment-full size-full\" alt=\"Menu Themes screen\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/9-Menu-Themes-screen.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/9-Menu-Themes-screen-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/9-Menu-Themes-screen-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, replace the background color for the main menu bar. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/10-replace-the-background-color-for-the-main-menu-bar.jpg\" class=\"attachment-full size-full\" alt=\"Replace the background color for the main menu bar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/10-replace-the-background-color-for-the-main-menu-bar.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/10-replace-the-background-color-for-the-main-menu-bar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/10-replace-the-background-color-for-the-main-menu-bar-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you\u2019re done, make sure to click on <em>Save Changes<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-Make-sure-to-click-on-Save-Changes.jpg\" class=\"attachment-full size-full\" alt=\"Make sure to click on Save Changes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-Make-sure-to-click-on-Save-Changes.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-Make-sure-to-click-on-Save-Changes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/11-Make-sure-to-click-on-Save-Changes-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019re finished with customizing the plugin settings, you can start creating your mega menu. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Head to <em>Appearance &gt; Menus<\/em> and <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-navigation-menu-in-wordpress\/\">add a navigation menu<\/a> together with all its top-level menu items and sub-items.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will notice that a new option has appeared in the Menus screen after a Max Mega Menu plugin installation, called <em>Max Mega Menu Settings<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, you should enable your mega menu by marking the box located under the <em>Max Mega Menu Settings<\/em> dropdown and hit <em>Save<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/12-Max-Mega-Menu-Settings-dropdown.jpg\" class=\"attachment-full size-full\" alt=\"Max Mega Menu Settings dropdown\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/12-Max-Mega-Menu-Settings-dropdown.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/12-Max-Mega-Menu-Settings-dropdown-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/12-Max-Mega-Menu-Settings-dropdown-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you hover over a menu item, you will see that a <em>Mega Menu<\/em> button has appeared on the tab, right next to its title.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/13-Mega-Menu-button-has-appeared-on-the-tab.jpg\" class=\"attachment-full size-full\" alt=\"Mega Menu button has appeared on the tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/13-Mega-Menu-button-has-appeared-on-the-tab.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/13-Mega-Menu-button-has-appeared-on-the-tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/13-Mega-Menu-button-has-appeared-on-the-tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Clicking on this button will make a new popup appear with additional options for the menu item. If you\u2019d like, here you can change the sub menu display mode (Flyout, Standard and Grid Layout).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/14-Change-the-sub-menu-display-mode.jpg\" class=\"attachment-full size-full\" alt=\"Change the sub menu display mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/14-Change-the-sub-menu-display-mode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/14-Change-the-sub-menu-display-mode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/14-Change-the-sub-menu-display-mode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Also, you will be able to add any widgets to your menu by selecting a widget type from the dropdown, and then adding it by using the wrench icon (for example \u2013 an image, a gallery, an audio file, etc.).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/15-Add-any-widgets-to-your-menu.jpg\" class=\"attachment-full size-full\" alt=\"Add any widgets to your menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/15-Add-any-widgets-to-your-menu.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/15-Add-any-widgets-to-your-menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/15-Add-any-widgets-to-your-menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Additionally, you can select the number of sub-menu columns you wish to have. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To store your widget settings, click the Save button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/16-Select-the-number-of-sub-menu-columns.jpg\" class=\"attachment-full size-full\" alt=\"Select the number of sub menu columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/16-Select-the-number-of-sub-menu-columns.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/16-Select-the-number-of-sub-menu-columns-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/16-Select-the-number-of-sub-menu-columns-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Close the popup when you\u2019re done, save your menu, and then visit your site to check out the appearance of your mega menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/17-Check-out-the-appearance-of-your-mega-menu.jpg\" class=\"attachment-full size-full\" alt=\"Check out the appearance of your mega menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/17-Check-out-the-appearance-of-your-mega-menu.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/17-Check-out-the-appearance-of-your-mega-menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/17-Check-out-the-appearance-of-your-mega-menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;90px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;top-picks-banner&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-a-mega-menu-in-qode-themes\"><\/a>How to Add a Mega Menu in Qode Themes<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/18-Adding-a-Mega-Menu-in-Qode-themes.jpg\" class=\"attachment-full size-full\" alt=\"Adding a Mega Menu in Qode themes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/18-Adding-a-Mega-Menu-in-Qode-themes.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/18-Adding-a-Mega-Menu-in-Qode-themes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/18-Adding-a-Mega-Menu-in-Qode-themes-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re using one of Qode Interactive\u2018s themes, you\u2019ll be pleased to hear they come with the mega menu functionality integrated.[\/vc_column_text][vc_empty_space height=&#8221;41px&#8221;][vc_column_text]<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/dSDW4lfYmuI\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]To add a mega menu in Qode themes, once again, you need to go to <em>Appearance &gt; Menus<\/em> and create your navigation menu, top-level items, and sub-items first.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For each top-level item that you wish to add a mega menu for, <strong>you need to click on the menu item name to open its options, and then select the wide option in the <em>Type<\/em> dropdown<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/19-Type-dropdown.jpg\" class=\"attachment-full size-full\" alt=\"Type dropdown\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/19-Type-dropdown.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/19-Type-dropdown-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/19-Type-dropdown-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want to add the mega menu navigation system to every top-level item, <strong>you need to change the same setting to <em>Wide<\/em> on each item individually<\/strong>. In other words, there\u2019s no one universal option, but rather each top-level item has to be set multiple times, in the exact same way.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And that\u2019s essentially how you add a mega menu if you\u2019re using one of our WordPress themes. Once you\u2019ve clicked on Save Menu, you can go to your live page to check out the appearance of your mega menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/20-Mega-Menu-in-Qode-themes.jpg\" class=\"attachment-full size-full\" alt=\"Mega Menu in Qode themes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/20-Mega-Menu-in-Qode-themes.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/20-Mega-Menu-in-Qode-themes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/07\/20-Mega-Menu-in-Qode-themes-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]A mega menu is a very useful website navigation system that can greatly improve your website\u2019s UX. If you have a complex website that contains a large number of pages and product categories, we highly recommend installing a Max Mega Menu plugin. <strong>This plugin will help you build multi-column mega menus<\/strong> and even allow you to add some striking widgets to go along with your menu items. Finally, if you\u2019re using (or plan to use) one of Qode Interactive themes and also need to create a mega menu for your site, you\u2019ll find that it\u2019s quite simple to do \u2013 even without the help of a plugin.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Mega menus can benefit any website that needs complex navigation. Here&#8217;s all you need to know about a WordPress mega menu and how to add it to your site.<\/p>\n","protected":false},"author":2,"featured_media":9356,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,36,13],"class_list":["post-9327","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-ux","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/9327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=9327"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/9327\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/9356"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=9327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=9327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=9327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}