{"id":122,"date":"2019-02-25T17:06:59","date_gmt":"2019-02-25T17:06:59","guid":{"rendered":"https:\/\/rockythemes.com\/nimva3\/docs\/?p=122"},"modified":"2019-02-25T17:35:30","modified_gmt":"2019-02-25T17:35:30","slug":"how-to-create-a-megamenu","status":"publish","type":"post","link":"https:\/\/rockythemes.com\/nimva3\/docs\/how-to-create-a-megamenu\/","title":{"rendered":"How to create a MegaMenu"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">To create a MegaMenu, first go to Appearance -> Menus area<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A megamenu requires to have a Menu item with at least 2 SubMenus and each SubMenu have at least 1 Item of their own<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s consider the following Menu Structure for our MegaMenu:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"849\" src=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-1.jpg\" alt=\"\" class=\"wp-image-123\" srcset=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-1.jpg 724w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-1-256x300.jpg 256w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the example above, we have the <strong>Pages<\/strong> menu item which has two sub-menu items: <strong>Templates<\/strong> and <strong>About Us.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Templates sub-menu has its own sub-menu items:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Nimva Agency<\/li><li>Nimva Barbers<\/li><li>Nimva Business<\/li><li>Nimva Creative<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The About Us sub-menu has its own Sub-menu items as well:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>About Us 1<\/li><li>About Us 2<\/li><li>About Us 3<\/li><li>About Us 4<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This will render the menu similar to the following image:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"389\" src=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-2.jpg\" alt=\"\" class=\"wp-image-126\" srcset=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-2.jpg 960w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-2-300x122.jpg 300w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-2-768x311.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As we can see the sub-menu items are displayed vertically with all sub-menu items appearing to the right, again in a vertical layout. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To change the menu above in a MegaMenu all we have to do is to expand the Page menu item settings &#8211; this being the main menu item &#8211; and simply check the <strong>Enable Mega Menu<\/strong> option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once that option is enabled we can specify how many columns to have: 1, 2, 3, 4, 5 or 6 columns. Also we can specify a custom FontAwesome icon which will be added in front of the Sub-Menu items text. We will leave that empty at the moment.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"779\" src=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-3.jpg\" alt=\"\" class=\"wp-image-128\" srcset=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-3.jpg 760w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-3-293x300.jpg 293w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click on <strong>Save Menu<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After saving the Menu we show now have a MegaMenu apeparing when we hover over the <strong>Pages<\/strong> menu item:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"612\" src=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-4.jpg\" alt=\"\" class=\"wp-image-130\" srcset=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-4.jpg 960w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-4-300x191.jpg 300w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-4-768x490.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As we can see, the sub-menu items <strong>Templates<\/strong> and <strong>About Us <\/strong>have been automatically transformed into the Heading Titles of the MegaMenu Columns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To have more columns, simply add more sub-menus similar to Templates and About us with their own children\/sub-menu items. Also make sure to change the <strong>Mega Menu Number of Columns<\/strong> for Pages to 3.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See an example below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"946\" src=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-5.jpg\" alt=\"\" class=\"wp-image-132\" srcset=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-5.jpg 720w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-5-228x300.jpg 228w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The menu will now display a 3 Columns as seen below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"622\" src=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-62.jpg\" alt=\"\" class=\"wp-image-136\" srcset=\"https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-62.jpg 960w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-62-300x194.jpg 300w, https:\/\/rockythemes.com\/nimva3\/docs\/wp-content\/uploads\/2019\/02\/mega-62-768x498.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The actual styling of the sub-menu items inside each column will be inherited from: <strong>Theme Options -> Menu Options -> Menu Style &#8211; Sublevels + Megamenu<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Heading columns will inherit the colors set under <strong>Menu Options -> MegaMenu<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a MegaMenu in Nimva<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-122","post","type-post","status-publish","format-standard","hentry","category-header"],"_links":{"self":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":8,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts\/122\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/posts\/122\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/media?parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/categories?post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rockythemes.com\/nimva3\/docs\/wp-json\/wp\/v2\/tags?post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}