{"id":223,"date":"2020-02-16T12:27:13","date_gmt":"2020-02-16T12:27:13","guid":{"rendered":"https:\/\/webnus.net\/kata\/documentation\/?p=223"},"modified":"2024-11-11T12:46:38","modified_gmt":"2024-11-11T12:46:38","slug":"how-to-design-a-responsive-menu","status":"publish","type":"post","link":"https:\/\/webnus.net\/kata\/documentation\/how-to-design-a-responsive-menu\/","title":{"rendered":"How to design a responsive menu"},"content":{"rendered":"\n<p>With the Kata theme, you can design headers optimized for various screen sizes, creating an adaptive user experience. For an enhanced mobile experience, use the Kata Hamburger Menu element to design a more advanced responsive menu. This guide provides step-by-step instructions on creating a mobile-friendly header, building an Elementor template, and managing visibility settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create a Mobile-Optimized Header Section<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_03.png\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_03.png\" alt=\"How to design a responsive menu\" class=\"wp-image-96\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-builder_04.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1536\" height=\"2015\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-builder_04.png\" alt=\"How to design a responsive menu\" class=\"wp-image-3611\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-builder_04.png 1536w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-builder_04-229x300.png 229w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-builder_04-781x1024.png 781w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-builder_04-768x1008.png 768w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-responsive-builder_04-1171x1536.png 1171w\" sizes=\"(max-width: 1536px) 100vw, 1536px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_05.png\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_05.png\" alt=\"How to design a responsive menu\" class=\"wp-image-98\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Add a New Header Section for Mobile Devices<\/strong><\/h3>\n\n\n\n<p>Under your existing header section, create an additional section. This section will be customized exclusively for smaller screens to ensure a better fit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Add Core Elements to the Mobile Header<\/strong><\/h3>\n\n\n\n<p>In this new section, place essential elements like the <strong>Kata Logo<\/strong> and <strong>Kata Hamburger Menu<\/strong>. This setup ensures that mobile users can access the main navigation with a simple toggle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_06.png\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_06.png\" alt=\"How to design a responsive menu\" class=\"wp-image-99\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Build a Toggle Menu Template<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Create a New Elementor Template<\/strong><\/h3>\n\n\n\n<p>To set up the content displayed when the toggle is tapped, go to <strong>WordPress Admin > Templates > Add New<\/strong>. Choose the <strong>Section<\/strong> template type and create a new template specifically for your mobile menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2019\/12\/kt-mblog-ad.jpg\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-template-addnew-image-min-01.png\" alt=\"How to design a responsive menu\" class=\"wp-image-100\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_08.png\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_08.png\" alt=\"How to design a responsive menu\" class=\"wp-image-101\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Set the Section\u2019s Height to Fit the Screen<\/strong><\/h3>\n\n\n\n<p>In the Elementor editor, set the section height to \u201cFit to Screen\u201d to make sure the menu fills the entire height of the device\u2019s screen when opened.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_09.png\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_09.png\" alt=\"How to design a responsive menu\" class=\"wp-image-102\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Add the Kata Menu Element and Customize Layout<\/strong><\/h3>\n\n\n\n<p>Drag the <strong>Kata Menu<\/strong> element into this section, setting its layout to <strong>Vertical<\/strong> for a streamlined, stacked appearance that works well on mobile.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_10.png\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_10.png\" alt=\"How to design a responsive menu\" class=\"wp-image-103\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Choose the Correct Menu to Display<\/strong><\/h3>\n\n\n\n<p>Select the desired menu from the dropdown options so that it\u2019s linked to this mobile-friendly menu template.<\/p>\n\n\n\n<p>Now, it\u2019s time to style this menu using the Styler. Go to the Style tab and open the Wrapper\u2019s styler by clicking on the icon in front of it. Go to the Text tab in the Styler and change the text alignment to the Center. This way, your menu items will be in the middle.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Style the Menu with the Styler Tool<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Align Menu Items<\/strong><\/h3>\n\n\n\n<p>In Elementor\u2019s <strong>Style<\/strong> tab, open the Styler for the <strong>Wrapper<\/strong> by clicking the icon next to it. Under the <strong>Text<\/strong> section, set the text alignment to <strong>Center<\/strong> to ensure the menu items are neatly aligned.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2019\/12\/kt-mblog-logo.svg\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_12.png\" alt=\"How to design a responsive menu\" class=\"wp-image-105\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Customize Individual Menu Items<\/strong><\/h3>\n\n\n\n<p>Click <strong>General<\/strong> within the Styler to access individual menu items. Here, you can adjust colors, fonts, padding, and other styling options to match your brand\u2019s aesthetics.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2019\/12\/kt-mblog-header-bg.svg\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_13.png\" alt=\"How to design a responsive menu\" class=\"wp-image-106\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Save the Template<\/strong><\/h3>\n\n\n\n<p>Once you\u2019ve finished styling, save the template. This mobile menu is now ready to be connected to the Kata Hamburger Menu element.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Link the Hamburger Menu to the Template<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Select Your New Template in Kata Hamburger Menu<\/strong><\/h3>\n\n\n\n<p>Go to the <strong>Kata Hamburger Menu<\/strong> settings and choose the template you saved in the previous step. This links the menu to the toggle button, so tapping it on mobile will display the advanced menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_14.png\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_14.png\" alt=\"How to design a responsive menu\" class=\"wp-image-107\" style=\"width:840px;height:auto\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Manage Visibility Settings for Different Devices<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Display Settings for Large Screens<\/strong><\/h3>\n\n\n\n<p>Set your main header section to <strong>Display: Block<\/strong> for larger screen sizes (Desktop, Laptop, and Tablet Landscape) and <strong>Display: None<\/strong> for mobile, small mobile, and smaller tablets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_15.png\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_15.png\" alt=\"How to design a responsive menu\" class=\"wp-image-108\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Display Settings for Mobile Header<\/strong><\/h3>\n\n\n\n<p>For the mobile-optimized header section, reverse these settings: <strong>Display: None<\/strong> for Desktop, Laptop, and Tablet Landscape, and <strong>Display: Block<\/strong> for mobile, small mobile, and smaller tablets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_17.png\" alt=\"How to design a responsive menu\" class=\"wp-image-110\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2020\/02\/kata-header-builder_18.png\" alt=\"How to design a responsive menu\" class=\"wp-image-111\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>With these steps, you\u2019ve successfully implemented a responsive, mobile-friendly header using Kata\u2019s advanced Hamburger Menu feature. By creating a toggle menu that opens to a full-screen layout, users can easily navigate your site on mobile devices, enjoying a seamless experience across all screen sizes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With the Kata theme, you can design headers optimized for various screen sizes, creating an adaptive user experience. For an enhanced mobile experience, use the Kata Hamburger Menu element to design a more advanced responsive menu. This guide provides step-by-step instructions on creating a mobile-friendly header, building an Elementor template, and managing visibility settings. Create [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":2067,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,35,25],"tags":[],"class_list":["post-223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-faq","category-menu","category-responsive-design"],"_links":{"self":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts\/223","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=223"}],"version-history":[{"count":4,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"predecessor-version":[{"id":3614,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts\/223\/revisions\/3614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/media\/2067"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}