{"id":7888,"date":"2019-05-17T12:23:29","date_gmt":"2019-05-17T12:23:29","guid":{"rendered":"https:\/\/manuals.qantumthemes.xyz\/evenz\/?post_type=ht_kb&#038;p=7888"},"modified":"2019-09-06T03:19:51","modified_gmt":"2019-09-06T03:19:51","slug":"7-1-mega-menu-plugin","status":"publish","type":"ht_kb","link":"https:\/\/manuals.qantumthemes.xyz\/evenz\/knowledge-base\/7-1-mega-menu-plugin\/","title":{"rendered":"7.01 Mega Menu plugin"},"content":{"rendered":"<p>This theme comes with a custom mega menu plugin called QantumThemes Mega Menu.<br \/>\nWe created this plugin as every existing one was over complicated and very time consuming, while this plugin is <strong>possibly the easiest mega-menu integration<\/strong> you will ever see. <strong>Remember that mega menus are only appearing in Desktop.<\/strong><\/p>\n<h3 id=\"important-usage-information\" >IMPORTANT USAGE INFORMATION:<\/h3>\n<p><strong>In desktop<\/strong>, a menu item linked to a mega menu will not be clickable and its sub-menu items won&#8217;t be accessible.<br \/>\n<strong>In mobile,<\/strong> all the sub menu items of a mega-menu item will be instead available. This will provide to mobile users the missing links that, in desktop, are available from the Mega Menu content.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8456\" src=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-06-at-05.17.40.jpg\" alt=\"\" width=\"1170\" height=\"683\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-06-at-05.17.40.jpg 1170w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-06-at-05.17.40-300x175.jpg 300w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-06-at-05.17.40-768x448.jpg 768w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-06-at-05.17.40-1024x598.jpg 1024w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-06-at-05.17.40-50x29.jpg 50w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-06-at-05.17.40-920x537.jpg 920w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-06-at-05.17.40-600x350.jpg 600w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-06-at-05.17.40-320x187.jpg 320w\" sizes=\"(max-width: 1170px) 100vw, 1170px\" \/><\/p>\n<p>Once installed, a new post type will appear:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7890\" src=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.09.06.jpg\" alt=\"\" width=\"162\" height=\"105\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.09.06.jpg 162w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.09.06-50x32.jpg 50w\" sizes=\"(max-width: 162px) 100vw, 162px\" \/><\/p>\n<p>You can add unlimited mega menu tabs and associate them with any menu item.<\/p>\n<h3 id=\"creating-a-mega-menu-item\" >Creating a mega menu item:<\/h3>\n<p><strong>This is a 2 steps process:<\/strong><\/p>\n<ol>\n<li>Create the mega menu page<\/li>\n<li>Add it to a menu item<\/li>\n<\/ol>\n<h3 id=\"step-1-creating-the-mega-menu-page\" >STEP 1: Creating the mega menu page:<\/h3>\n<ul>\n<li>First enable<strong> Page Builder for this post type: go to WPBakery Page Builder &gt; Role Manager<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7899\" src=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.10.56.jpg\" alt=\"\" width=\"1170\" height=\"146\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.10.56.jpg 1170w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.10.56-300x37.jpg 300w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.10.56-768x96.jpg 768w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.10.56-1024x128.jpg 1024w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.10.56-50x6.jpg 50w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.10.56-920x115.jpg 920w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.10.56-600x75.jpg 600w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.10.56-320x40.jpg 320w\" sizes=\"(max-width: 1170px) 100vw, 1170px\" \/><\/li>\n<li>Select <strong>Custom<\/strong> post types<\/li>\n<li>Enable <strong>qt__megamenu_page<\/strong> and <strong>qt__megafooter_page<\/strong><\/li>\n<\/ul>\n<h4 id=\"now-you-can-start-creating\" >Now you can start creating!<\/h4>\n<ul>\n<li>Click Mega Menu &gt; Add new<\/li>\n<li>Backend Editor (or frontend? Your call!)<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7891\" src=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.11.45.jpg\" alt=\"\" width=\"606\" height=\"337\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.11.45.jpg 606w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.11.45-300x167.jpg 300w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.11.45-50x28.jpg 50w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.11.45-600x334.jpg 600w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.11.45-320x178.jpg 320w\" sizes=\"(max-width: 606px) 100vw, 606px\" \/><\/li>\n<li>Remember to add some<strong> vertical padding<\/strong> to the rows. We recommend a 2 levels row structure, with a background on the outer row, but is just a pure personal choice.<\/li>\n<li>We recommend adding a container to the Inner row<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-post wp-image-7892\" src=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.14.39-920x419.jpg\" alt=\"\" width=\"920\" height=\"419\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.14.39-920x419.jpg 920w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.14.39-300x137.jpg 300w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.14.39-768x350.jpg 768w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.14.39-1024x466.jpg 1024w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.14.39-50x23.jpg 50w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.14.39-600x273.jpg 600w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.14.39-320x146.jpg 320w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.14.39.jpg 1170w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/li>\n<li>Custom <strong>CSS<\/strong> styles<strong> will not appear<\/strong> in the preview (to prevent a double loop when previewing if the menu is already active in frontend).<strong> But they will work perfectly<\/strong> while associating the Mega Menu page to a menu item.<\/li>\n<li>Do not add too many mega menus if you care about performance, nor too many things in the mega menu content, as the loading time is a very important factor.<\/li>\n<\/ul>\n<p>Once you are happy with your mega menu, you can publish it.<\/p>\n<h3 id=\"step-2-associating-the-mega-menu-page-to-a-menu-item\" >STEP 2: Associating the Mega Menu page to a menu item:<\/h3>\n<p>At this point, to associate the mega menu to a menu item, you will need to copy the ID of your new menu page, in this example 878:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-post wp-image-7893\" src=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.16.30-920x312.jpg\" alt=\"\" width=\"920\" height=\"312\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.16.30-920x312.jpg 920w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.16.30-300x102.jpg 300w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.16.30-768x261.jpg 768w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.16.30-50x17.jpg 50w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.16.30-600x204.jpg 600w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.16.30-320x109.jpg 320w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.16.30.jpg 981w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/p>\n<p>Go to appearance &gt; Menu and choose the menu that is set on the Primary location:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7894\" src=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.10.jpg\" alt=\"\" width=\"541\" height=\"183\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.10.jpg 541w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.10-300x101.jpg 300w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.10-50x17.jpg 50w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.10-320x108.jpg 320w\" sizes=\"(max-width: 541px) 100vw, 541px\" \/><\/p>\n<p>In Screen Options enable the CSS classes<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7895 size-full\" src=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.39.jpg\" alt=\"\" width=\"1170\" height=\"302\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.39.jpg 1170w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.39-300x77.jpg 300w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.39-768x198.jpg 768w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.39-1024x264.jpg 1024w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.39-50x13.jpg 50w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.39-920x237.jpg 920w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.39-600x155.jpg 600w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.20.39-320x83.jpg 320w\" sizes=\"(max-width: 1170px) 100vw, 1170px\" \/><\/p>\n<p>Edit the item you want to trigger the Mega Menu, and add the class<\/p>\n<p><strong>qt-megamenu-is-ID<\/strong><\/p>\n<p>Where ID is the number previously copied.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7896\" src=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.22.20.jpg\" alt=\"\" width=\"428\" height=\"316\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.22.20.jpg 428w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.22.20-300x221.jpg 300w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.22.20-50x37.jpg 50w, https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-17-at-14.22.20-320x236.jpg 320w\" sizes=\"(max-width: 428px) 100vw, 428px\" \/><\/p>\n<p>Then <strong>Save<\/strong> the menu.<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht_kb_category":[704],"ht_kb_tag":[],"class_list":["post-7888","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-mega-menu-footer"],"_links":{"self":[{"href":"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-json\/wp\/v2\/ht_kb\/7888"}],"collection":[{"href":"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-json\/wp\/v2\/ht_kb"}],"about":[{"href":"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-json\/wp\/v2\/comments?post=7888"}],"version-history":[{"count":8,"href":"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-json\/wp\/v2\/ht_kb\/7888\/revisions"}],"predecessor-version":[{"id":8457,"href":"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-json\/wp\/v2\/ht_kb\/7888\/revisions\/8457"}],"wp:attachment":[{"href":"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-json\/wp\/v2\/media?parent=7888"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-json\/wp\/v2\/ht_kb_category?post=7888"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/evenz\/wp-json\/wp\/v2\/ht_kb_tag?post=7888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}