{"id":214,"date":"2020-02-16T12:06:27","date_gmt":"2020-02-16T12:06:27","guid":{"rendered":"https:\/\/webnus.net\/kata\/documentation\/?p=214"},"modified":"2024-11-12T10:59:18","modified_gmt":"2024-11-12T10:59:18","slug":"mega-menu-builder","status":"publish","type":"post","link":"https:\/\/webnus.net\/kata\/documentation\/mega-menu-builder\/","title":{"rendered":"Mega Menu Builder"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Access the Mega Menu Section<\/h2>\n\n\n\n<p><strong>Log in to your WordPress Admin Panel.<\/strong><\/p>\n\n\n\n<p>In the sidebar, locate and click on <strong>Mega Menu<\/strong>. This section is where you will manage all your mega menus.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-01.png-1.webp\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1543\" height=\"842\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-01.png-1.webp\" alt=\"Mega Menu Builder\" class=\"wp-image-3626\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-01.png-1.webp 1543w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-01.png-1-300x164.webp 300w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-01.png-1-1024x559.webp 1024w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-01.png-1-768x419.webp 768w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-01.png-1-1536x838.webp 1536w\" sizes=\"(max-width: 1543px) 100vw, 1543px\" \/><\/a><\/figure>\n\n\n\n<p>If you haven\u2019t created a mega menu yet, click on <strong>Add New<\/strong> to start the creation process.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-02.png-1.webp\"><img decoding=\"async\" width=\"1152\" height=\"644\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-02.png-1.webp\" alt=\"Mega Menu Builder\" class=\"wp-image-3628\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-02.png-1.webp 1152w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-02.png-1-300x168.webp 300w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-02.png-1-1024x572.webp 1024w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-02.png-1-768x429.webp 768w\" sizes=\"(max-width: 1152px) 100vw, 1152px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating and Naming Your Mega Menu<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>After clicking <strong>Add New<\/strong>, you\u2019ll be asked to enter a name for your mega menu. Choose a name that makes sense and helps you identify the menu later (e.g., &#8220;Main Navigation&#8221; or &#8220;Footer Menu&#8221;).<\/li>\n\n\n\n<li>Once you\u2019ve named your menu, click <strong>Publish<\/strong> to save your work.<\/li>\n\n\n\n<li>Your new mega menu is now created, but it\u2019s not yet designed. To design it, you\u2019ll need to open the Elementor editor.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Click on the \u201cEdit in Elementor\u201d button.<\/strong><\/h3>\n\n\n\n<p>This will open the Elementor editor, where you can design your mega menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-03.png-1.webp\"><img decoding=\"async\" width=\"1114\" height=\"701\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-03.png-1.webp\" alt=\"Mega Menu Builder\" class=\"wp-image-3627\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-03.png-1.webp 1114w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-03.png-1-300x189.webp 300w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-03.png-1-1024x644.webp 1024w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-03.png-1-768x483.webp 768w\" sizes=\"(max-width: 1114px) 100vw, 1114px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Editing Your Mega Menu in Elementor<\/h2>\n\n\n\n<p><strong>Kata Elements<\/strong>: These are pre-designed widgets that you can drag and drop into your menu layout. You can use elements such as images, text, buttons, icons, and more to build your mega menu.<\/p>\n\n\n\n<p><strong>Styler<\/strong>: <a href=\"https:\/\/webnus.net\/kata\/documentation\/styler\/\" data-type=\"link\" data-id=\"https:\/\/webnus.net\/kata\/documentation\/styler\/\"><strong>The <\/strong><\/a><strong><a href=\"https:\/\/webnus.net\/kata\/documentation\/styler\/\" data-type=\"link\" data-id=\"https:\/\/webnus.net\/kata\/documentation\/styler\/\">Styler<\/a> <\/strong>allows you to customize the look of your mega menu, such as adjusting typography, colors, padding, and margins. You can apply these styles to individual elements or to the whole menu for a cohesive design.<\/p>\n\n\n\n<p>As you design, preview the changes in real-time. Once satisfied with the layout, click <strong>Update<\/strong> to save your changes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-04.png-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1897\" height=\"824\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-04.png-1.webp\" alt=\"Mega Menu Builder\" class=\"wp-image-3629\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-04.png-1.webp 1897w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-04.png-1-300x130.webp 300w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-04.png-1-1024x445.webp 1024w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-04.png-1-768x334.webp 768w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-04.png-1-1536x667.webp 1536w\" sizes=\"(max-width: 1897px) 100vw, 1897px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Enabling the Mega Menu Box in the Menu Settings<\/h2>\n\n\n\n<p>Now that your mega menu is designed, the next step is to make sure it appears in your WordPress menu settings.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the WordPress Dashboard and navigate to Appearance &gt; Menus.<\/li>\n\n\n\n<li>On the top-right corner of the page, click on Screen Options.<\/li>\n\n\n\n<li>In the dropdown that appears, check the box for Mega Menu. This will enable the Mega Menu box on the left side of the page.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-05-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2528\" height=\"889\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-05-3.png\" alt=\"Mega Menu Builder\" class=\"wp-image-3632\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-05-3.png 2528w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-05-3-300x105.png 300w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-05-3-1024x360.png 1024w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-05-3-768x270.png 768w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-05-3-1536x540.png 1536w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-05-3-2048x720.png 2048w\" sizes=\"(max-width: 2528px) 100vw, 2528px\" \/><\/a><\/figure>\n\n\n\n<p>In most cases, the Mega Menu box will be enabled by default. However, it\u2019s always good to double-check this setting.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-06.png-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1109\" height=\"709\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-06.png-1.webp\" alt=\"Mega Menu Builder\" class=\"wp-image-3633\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-06.png-1.webp 1109w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-06.png-1-300x192.webp 300w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-06.png-1-1024x655.webp 1024w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-06.png-1-768x491.webp 768w\" sizes=\"(max-width: 1109px) 100vw, 1109px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Your Mega Menu to a Navigation Menu<\/h2>\n\n\n\n<p>Once your mega menu is designed and the Mega Menu box is visible, you can add it to your website&#8217;s main navigation menu.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the Menu Structure section, look for the Add Menu Items area.<\/li>\n\n\n\n<li>Find the mega menu you created earlier. It should be listed under Mega Menus.<\/li>\n\n\n\n<li>Click on your Mega Menu and then click on Add to Menu. This will add the mega menu as a top-level item in your navigation menu.<\/li>\n\n\n\n<li>After adding the mega menu, click Save Menu to apply the changes.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-07.png-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1598\" height=\"571\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-07.png-1.webp\" alt=\"Mega Menu Builder\" class=\"wp-image-3634\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-07.png-1.webp 1598w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-07.png-1-300x107.webp 300w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-07.png-1-1024x366.webp 1024w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-07.png-1-768x274.webp 768w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-mega-menu-builder-07.png-1-1536x549.webp 1536w\" sizes=\"(max-width: 1598px) 100vw, 1598px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The Kata Mega Menu Builder offers a simple yet powerful way to design a custom mega menu using Elementor and Styler. With a few straightforward steps, you can create a visually engaging and user-friendly navigation experience for your website visitors. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Access the Mega Menu Section Log in to your WordPress Admin Panel. In the sidebar, locate and click on Mega Menu. This section is where you will manage all your mega menus. If you haven\u2019t created a mega menu yet, click on Add New to start the creation process. Creating and Naming Your Mega Menu [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":2553,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,21],"tags":[],"class_list":["post-214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kata-builders","category-mega-menu-builder"],"_links":{"self":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts\/214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/comments?post=214"}],"version-history":[{"count":4,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts\/214\/revisions"}],"predecessor-version":[{"id":3641,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts\/214\/revisions\/3641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/media\/2553"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/media?parent=214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/categories?post=214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/tags?post=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}