{"id":279,"date":"2015-03-12T15:03:38","date_gmt":"2015-03-12T15:03:38","guid":{"rendered":"https:\/\/www.megamenu.com\/?page_id=279"},"modified":"2024-09-06T11:21:59","modified_gmt":"2024-09-06T10:21:59","slug":"mega-menus","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/mega-menus\/","title":{"rendered":"Mega Menus"},"content":{"rendered":"\n<p>A Mega Menu is the name given to a large&nbsp;panel of content which is displayed below a menu item when the user clicks or hovers over the menu item. Mega Menus can contain sub menu items and Widgets.<\/p>\n\n\n\n<p>Go to<em> Appearance &gt; Menus<\/em> to manage your menu content.<\/p>\n\n\n\n<p>Each item in your menu will display a blue &#8216;Mega Menu&#8217; button when hovered over. Clicking this button will launch a panel containing all of the Mega Menu settings for this menu item.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/menu-item-options.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Displaying Menu Items in a Mega Menu<\/h4>\n\n\n\n<p>By default, sub menu items will be displayed in a dropdown (Flyout) menu on your site.<\/p>\n\n\n\n<p>To convert a Flyout menu to a Mega Menu, switch the Sub menu display mode from &#8220;Flyout Menu&#8221; to &#8220;Mega Menu &#8211; Grid Layout&#8221;.&nbsp;If present, sub menu items (Mammals, Reptiles, Birds) will be pre-populated within in the Mega Menu editor and can be dragged and dropped into position. The Grid Layout editor lets you create columns and new rows to organise your sub menu content.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/grid-layout.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2646\" height=\"1692\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/grid-layout.png\" alt=\"\" class=\"wp-image-213696\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/grid-layout.png 2646w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/grid-layout-300x192.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/grid-layout-768x491.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/grid-layout-1024x655.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/grid-layout-50x32.png 50w\" sizes=\"auto, (max-width: 2646px) 100vw, 2646px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Displaying Widgets in a Mega Menu<\/h4>\n\n\n\n<p>Select a widget to add to a Mega Menu using the selector at the top right of the Mega Menu editor. The widget selector will list all of the widgets installed on&nbsp;your WordPress site.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/widget-in-megamenu.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2646\" height=\"1692\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/widget-in-megamenu.png\" alt=\"\" class=\"wp-image-213701\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/widget-in-megamenu.png 2646w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/widget-in-megamenu-300x192.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/widget-in-megamenu-768x491.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/widget-in-megamenu-1024x655.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/widget-in-megamenu-50x32.png 50w\" sizes=\"auto, (max-width: 2646px) 100vw, 2646px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>You can add any WordPress widget(s) to your sub menu, for example your latest WooCommerce products, a slider, images, custom HTML, social icons etc.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The Result (displaying a Widget alongside&nbsp;Menu Items in a mega menu)<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/mega-menu-example.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2646\" height=\"1692\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/mega-menu-example.png\" alt=\"\" class=\"wp-image-213703\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/mega-menu-example.png 2646w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/mega-menu-example-300x192.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/mega-menu-example-768x491.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/mega-menu-example-1024x655.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/mega-menu-example-50x32.png 50w\" sizes=\"auto, (max-width: 2646px) 100vw, 2646px\" \/><\/a><\/figure>\n\n\n\n<p>For the purposes of demonstration we are only showing a basic example here, but the Grid Layout editor allows great flexibility in creating complex layouts containing both menu items and widgets.<\/p>\n\n\n\n<p><a class=\"arrow-btn\" style=\"float: right;\" href=\"\/documentation\/flyout-menus\/\">Next up: Flyout Menus<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Mega Menu is the name given to a large&nbsp;panel of content which is displayed below a menu item when the user clicks or hovers over the menu item. Mega Menus can contain sub menu items and Widgets. Go to Appearance &gt; Menus to manage your menu content. Each item&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[13],"ht-kb-tag":[],"class_list":["post-279","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-getting-started"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"A Mega Menu is the name given to a large&nbsp;panel of content which is displayed below a menu item when the user clicks or hovers over the menu item. Mega Menus can contain sub menu items and Widgets. Go to Appearance &gt; Menus to manage your menu content. Each item...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=279"}],"version-history":[{"count":29,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/279\/revisions"}],"predecessor-version":[{"id":414514,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/279\/revisions\/414514"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=279"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}