{"id":115,"date":"2023-09-26T10:36:26","date_gmt":"2023-09-26T10:36:26","guid":{"rendered":"https:\/\/docs.codevibrant.com\/azure\/?p=115"},"modified":"2024-01-09T09:48:32","modified_gmt":"2024-01-09T09:48:32","slug":"how-to-configure-your-main-header-area-in-your-site","status":"publish","type":"post","link":"https:\/\/docs.codevibrant.com\/azure\/how-to-configure-your-main-header-area-in-your-site\/","title":{"rendered":"How to configure your main header area in your site??"},"content":{"rendered":"\n<p>Header\u2019s <strong>Main Area<\/strong> is the header section which consists of important navigational menus such as: <strong>Sticky Header<\/strong>, <strong>Site Mode<\/strong> <strong>Switcher<\/strong>, <strong>Search Icon<\/strong> and <strong>Sticky sidebar toggle<\/strong> and a <strong>custom button<\/strong> and <strong>link space for Custom button<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video Guide<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Azure Complete Walkthrough\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/-BAtD90lTGg?start=1112&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><em>Starts from the relative time.<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">To customize the Main Header Area settings,<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open your WordPress Dashboard, and go to <strong>Appearance&gt;&gt;Customizer.<\/strong><\/li>\n\n\n\n<li>Then, navigate to <strong>Header Settings&gt;&gt;Main Area<\/strong><\/li>\n<\/ul>\n\n\n\n<p>You\u2019ll find two tabs in <strong>Main Area<\/strong> option:<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"list-style-type:1\">\n<li><strong>General Tab<\/strong><\/li>\n\n\n\n<li><strong>Design Tab<\/strong><\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"381\" height=\"771\" src=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-16.png\" alt=\"Main Header Settings\" class=\"wp-image-117\" style=\"width:181px;height:366px\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-16.png 381w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-16-148x300.png 148w\" sizes=\"auto, (max-width: 381px) 100vw, 381px\" \/><\/figure><\/div>\n\n\n<p>Navigate yourself to <strong>General tab<\/strong> by clicking on the tab. Under <strong>General tab<\/strong>, there are <strong>4 different toggle options<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enable Header Sticky<\/strong>: Toggling this option \u2018on\u2019 will lock the Main Area Header at the top of the page even when you scroll down your site.<\/li>\n\n\n\n<li><strong>Enable Site Mode Switcher<\/strong>: Toggling on this option will enable a Mode Switcher toggle icon in the<strong> Main Area Header<\/strong> enabling users to switch mode on the site.<\/li>\n\n\n\n<li><strong>Enable Search Icon<\/strong>: Toggling this option \u201con\u201d will enable a search icon in the <strong>Main Area Header<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"506\" src=\"http:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Header-Sticky-Sidebar.jpg\" alt=\"Header Sticky Sidebar\" class=\"wp-image-116\" style=\"width:752px;height:423px\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Header-Sticky-Sidebar.jpg 900w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Header-Sticky-Sidebar-300x169.jpg 300w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Header-Sticky-Sidebar-768x432.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p>You can edit your <strong>Sticky Sidebar<\/strong> by going to <strong>Widgets&gt;&gt;Header Sticky Sidebar<\/strong>. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>There is another customizing option in the Main Area of the header settings. <strong>Custom Button <\/strong>section, where you can make necessary amendments for a custom button by adding <strong>Custom Button label <\/strong>and <strong>Custom Button Link.<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Designing your Main Area in header settings<\/h2>\n\n\n\n<p><strong>In Design Tab<\/strong>, you can add <strong>Background Image<\/strong> and <strong>Color<\/strong>, based on your selection.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the &#8220;<strong>Color<\/strong>&#8221; from the drop-down menu to decorate header with Color<\/li>\n\n\n\n<li>Or Click on &#8220;<strong>Image<\/strong>&#8221; to add image in the Main Header Area.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"245\" height=\"229\" src=\"http:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Header-Main-Area.jpg\" alt=\"Main Header Designing\" class=\"wp-image-208\" style=\"width:345px;height:322px\"\/><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>Header\u2019s Main Area is the header section which consists of important navigational menus such as: Sticky Header, Site Mode Switcher, Search Icon and Sticky sidebar toggle and a custom button and link space for Custom button. Video Guide To customize the Main Header Area settings, You\u2019ll find two tabs in Main Area option: Navigate yourself [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-115","post","type-post","status-publish","format-standard","hentry","category-header-settings"],"_links":{"self":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/comments?post=115"}],"version-history":[{"count":5,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/115\/revisions"}],"predecessor-version":[{"id":399,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/115\/revisions\/399"}],"wp:attachment":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/media?parent=115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/categories?post=115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/tags?post=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}