{"id":240,"date":"2020-05-17T19:10:46","date_gmt":"2020-05-17T19:10:46","guid":{"rendered":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/?p=240"},"modified":"2020-05-17T19:10:47","modified_gmt":"2020-05-17T19:10:47","slug":"creating-mega-menu","status":"publish","type":"post","link":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/blog\/creating-mega-menu\/","title":{"rendered":"Creating Mega Menu"},"content":{"rendered":"\n<p><strong>Setup Mega-Menu<\/strong><\/p>\n\n\n\n<p><strong>1:&nbsp;<\/strong>Once The Pantograph Extensions plugin is activated Mega Menu is available in your admin panel dashboard.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" width=\"159\" height=\"279\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega1.png\" alt=\"\" class=\"wp-image-20\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega1.png 159w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega1-34x60.png 34w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega1-85x150.png 85w\" sizes=\"(max-width: 159px) 100vw, 159px\" \/><\/figure><\/div>\n\n\n\n<p><strong>2: Enable WPBakery for Mega Menu<\/strong><\/p>\n\n\n\n<p>a. Navigate to WPBakery &gt; Role Manager<br>\nb. In Post Types choose \u2018Custom\u2019 and then make sure mega_menu is checked.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega2.png\"><img loading=\"lazy\" width=\"1024\" height=\"452\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega2-1024x452.png\" alt=\"\" class=\"wp-image-21\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega2-1024x452.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega2-300x133.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega2-768x339.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega2-60x27.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega2-150x66.png 150w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega2.png 1349w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>&nbsp;3:<\/strong> Now add mega menu item in Main Menu from the Appearence&gt;Menus and click on Screen Options to expand the options. And check the Mega Menu and CSS Classes item. And select Main Menu from&nbsp;Select a menu to edit: and press Select button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega3.png\"><img loading=\"lazy\" width=\"1024\" height=\"463\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega3-1024x463.png\" alt=\"\" class=\"wp-image-22\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega3-1024x463.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega3-300x136.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega3-768x348.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega3-60x27.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega3-150x68.png 150w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega3.png 1337w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>4:<\/strong> Now you see the Mega Menu on the left side; you can select this mega menu item and click on the Add to Menu button. Drag the mega menu item and use it as a child menu for a parent menu. In the parent menu need to expand and add css class &#8216;dropdown megamenu&#8217;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega4.png\"><img loading=\"lazy\" width=\"1024\" height=\"506\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega4-1024x506.png\" alt=\"\" class=\"wp-image-23\" srcset=\"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega4-1024x506.png 1024w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega4-300x148.png 300w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega4-768x380.png 768w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega4-60x30.png 60w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega4-150x74.png 150w, https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-content\/uploads\/2018\/01\/mega4.png 1329w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Finally, <strong>Save Menu<\/strong> from right side.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setup Mega-Menu 1:&nbsp;Once The Pantograph Extensions plugin is activated Mega Menu is available in your admin panel dashboard. 2: Enable WPBakery for Mega Menu a. Navigate to WPBakery &gt; Role Manager b. In Post Types choose \u2018Custom\u2019 and then make sure mega_menu is checked. &nbsp;3: Now add mega menu item in Main Menu from the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-json\/wp\/v2\/posts\/240"}],"collection":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":0,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-json\/wp\/v2\/posts\/240\/revisions"}],"wp:attachment":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-json\/wp\/v2\/media?parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-json\/wp\/v2\/categories?post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/wp-json\/wp\/v2\/tags?post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}