{"title":"Customizing Phlox Header Section","id":35894,"link":"https:\/\/env.averta.net\/en\/step\/customizing-phlox-header-section\/","parent":[59905,35058],"content":"<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36733 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/header-section.png\" alt=\"header-section\" width=\"316\" height=\"302\" \/>To customize your website&#8217;s header section, Phlox provides many options in the customizer. The <strong>Header Section<\/strong>?includes six?layouts, a search button on?the header, changing the header width and height, and a border below the header.<br \/>\nAlso, the header can be sticky or not.<\/p>\n<p>To find the related options follow below steps:<\/p>\n<ol>\n<li style=\"font-weight: 400;\">Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click <\/span><b>Appearance<\/b><span style=\"font-weight: 400;\"> on the <\/span><b>Dashboard<\/b><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Then click?<\/span><b>Customize<\/b><\/li>\n<li style=\"font-weight: 400;\">Navigate?<strong>Header &gt; Header Section<\/strong><\/li>\n<\/ol>\n<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/hNU85eRLCQg?rel=0&amp;ecver=2\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">?<\/span><\/iframe><\/div>\n<hr style=\"clear: both;\" \/>\n<h3>Header Layout<\/h3>\n<p>There are six available layouts to choose. All of these layouts display?logo and menu, just the located places are different.?<\/p>\n<table>\n<tbody>\n<tr>\n<th style=\"text-align: center;\">Layout<\/th>\n<th style=\"text-align: center;\">Preview<\/th>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Logo Left &#8211; Menu Right<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-35912 size-full aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/header-layout1-1-e1477135025225.png\" width=\"250\" height=\"91\" \/><\/td>\n<td><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35903 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/logo-left-menu-right.png\" alt=\"logo-left-menu-right\" width=\"976\" height=\"180\" \/><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Logo Left &#8211; Burger Right<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35910 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/header-layout2.png\" alt=\"header-layout2\" width=\"251\" height=\"92\" \/><\/td>\n<td><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35904 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/logo-left-burger-right.png\" alt=\"logo-left-burger-right\" width=\"976\" height=\"180\" \/><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Logo Right &#8211; Menu Left<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35911 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/header-layout3.png\" alt=\"header-layout3\" width=\"251\" height=\"92\" \/><\/td>\n<td><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35907 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/logo-right-menu-left.png\" alt=\"logo-right-menu-left\" width=\"976\" height=\"180\" \/><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Logo Right &#8211; Burger Left<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35913 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/header-layout4.png\" alt=\"header-layout4\" width=\"251\" height=\"92\" \/><\/td>\n<td><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35906 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/logo-right-burger-left.png\" alt=\"logo-right-burger-left\" width=\"976\" height=\"180\" \/><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Logo and Menu Middle<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-35914 size-full aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/header-layout5-e1477135079223.png\" width=\"250\" height=\"92\" \/><\/td>\n<td><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35905 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/logo-mid-menu-mid.png\" alt=\"logo-mid-menu-mid\" width=\"976\" height=\"242\" \/><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Logo and Menu Left<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35915 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/header-layout6.png\" alt=\"header-layout6\" width=\"251\" height=\"92\" \/><\/td>\n<td><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35902 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/logo-left-menu-left.png\" alt=\"logo-left-menu-left\" width=\"976\" height=\"242\" \/><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Vertical Menu<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-51570 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Screen-Shot-2017-12-12-at-12.16.34-PM-e1513068747100.png\" alt=\"\" width=\"258\" height=\"95\" \/><\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-51573\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/VerticalMenuPreview.png\" alt=\"\" width=\"245\" height=\"644\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/VerticalMenuPreview.png 245w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/VerticalMenuPreview-114x300.png 114w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/VerticalMenuPreview-66x173.png 66w\" sizes=\"(max-width: 245px) 100vw, 245px\" \/><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">No Header<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-51572 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Screen-Shot-2017-12-12-at-12.21.05-PM-e1513068718862.png\" alt=\"\" width=\"256\" height=\"94\" \/><\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong>As you can see in some layouts menu replaced by a burger menu icon. You can find the information about customizing the burger menu in <a href=\"https:\/\/env.averta.net\/en\/step\/adding-phlox-burger-menu-to-the-header\/?b=35671,35671\" title=\"Adding Phlox Burger Menu to the Header\">this article<\/a>.<\/p>\n<hr \/>\n<h3>Search Button<\/h3>\n<p>By enabling search button, a search icon appears at the right side of the menu (This option is not functional for the last two header layouts).<\/p>\n<div class=\"row\"><div class=\"column col-half\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35921\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/search-button.png\" alt=\"search-button\" width=\"293\" height=\"108\" \/><\/div><div class=\"column col-half\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35922\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/search-button-preview.png\" alt=\"search-button-preview\" width=\"536\" height=\"134\" \/><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35923\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/search5.png\" alt=\"search5\" width=\"950\" height=\"200\" \/><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35924\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/search6.png\" alt=\"search6\" width=\"950\" height=\"200\" \/><\/div><\/div>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>The search button is also available at top header bar too. To know more about top header bar, <a href=\"https:\/\/env.averta.net\/en\/step\/customizing-phlox-header-menu\/?b=35965,35965\" title=\"Customizing Phlox Header Menu\">read this page<\/a>.<\/p>\n<p>By clicking on the search button, a new search?section will open. There are two available skins for this fullscreen search. To choose your desired skin:<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Go to your <strong>WordPress Admin Panel<\/strong><\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click?<\/span><b>Appearance<\/b><span style=\"font-weight: 400;\"> on the <\/span><b>Dashboard<\/b><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Then click?<\/span><b>Customize<\/b><\/li>\n<li style=\"font-weight: 400;\">Navigate?<strong>Header &gt;?FullScreen Search<\/strong><\/li>\n<\/ol>\n<div class=\"row\"><div class=\"column col-half\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35958 alignnone\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/full-screen-search.png\" alt=\"full-screen-search\" width=\"309\" height=\"412\" \/><\/div><div class=\"column col-half\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35960\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/light-skin.png\" alt=\"light-skin\" width=\"834\" height=\"504\" \/><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35959\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/dark-skin.png\" alt=\"dark-skin\" width=\"834\" height=\"504\" \/><\/div><\/div>\n<p>&nbsp;<\/p>\n<hr \/>\n<h3>Header Width, Header Height, and Border<\/h3>\n<ul>\n<li>The <strong>header width<\/strong> can be appeared?<em>boxed<\/em> or <em>full-width<\/em>. In the?boxed?layout, the width is equal to the?content of page content wrapper and the full-width header, the width is 100% of the browser width.<\/li>\n<\/ul>\n<p class=\"aswi-text-box box-important\"><strong>Important: <\/strong>This change can only be seen in desktop view.<\/p>\n<div class=\"row\"><div class=\"column col-half\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35936\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/width-height-border.png\" alt=\"width-height-border\" width=\"295\" height=\"337\" \/><\/div><div class=\"column col-half\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35964\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/boxed-preview-2.jpg\" alt=\"boxed-preview\" width=\"985\" height=\"238\" \/><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35931 alignnone\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/full-width-preview.jpg\" alt=\"full-width-preview\" width=\"984\" height=\"239\" \/><\/div><\/div>\n<ul>\n<li>You can also change the <strong>header height<\/strong> (in pixels).<\/li>\n<li>There can be a border below the header. Enable it by switching on the?<strong>Add border<\/strong>.<\/li>\n<\/ul>\n<hr \/>\n<h3>Header Animation Delay and Overlay Header<\/h3>\n<p>You can add delay before starting the header animation.<\/p>\n<p>Also, if you want to overlap your header on the next section, you can <strong>Enable Overlay Header<\/strong>. The next section will appear under the header instead of appearing after the header.<\/p>\n<hr \/>\n<h3>Display Socials, Logo, and Cart<\/h3>\n<p>These items can be added to all of the available layouts:<\/p>\n<p>You can enable <strong>Add Social Icons<\/strong> option to add your social networks icons in header menu. Their size can be Small, Normal, Large, or Extra Large.<\/p>\n<p>Enable?<strong>Display Logo<\/strong> to add your website logo in header section.<\/p>\n<p>To add header cart in header section, enable?<strong>Display Header Cart<\/strong>. You can change the icon for cart and the color of dropdown skin.<\/p>\n<p>Cart Dropdown can be activated with Hover or Click.<\/p>\n<hr style=\"clear: both;\" \/>\n<h3>Sticky Header<\/h3>\n<p>By enabling the sticky header option, the header is always accessible and will be fixed at the top of the page, as you scroll down the page.<\/p>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/StickyHeader0-1.gif\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35975 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/StickyHeader0-1.gif\" alt=\"stickyheader0\" width=\"988\" height=\"508\" \/><\/a><\/p>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-sticky-header.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-58787 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-sticky-header.png\" alt=\"\" width=\"302\" height=\"695\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-sticky-header.png 302w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-sticky-header-130x300.png 130w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-sticky-header-75x173.png 75w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><\/a>You are able to change the height, background color and color scheme of the sticky header. Also, there is an option to scale down the logo?while scrolling down.<\/p>\n<p>&nbsp;<\/p>\n<hr style=\"clear: both;\" \/>\n<h3>Background Color<\/h3>\n<h4>Header or Vertical Menu Background Color<\/h4>\n<p>You can set a background color for your menu.<\/p>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong>If you want to change more options of Vertical Menu, check out <a href=\"https:\/\/env.averta.net\/en\/step\/adding-phlox-burger-menu-to-the-header\/?b=35671,35671\" title=\"Adding Phlox Burger Menu to the Header\">Header Menu<\/a>.<\/p>\n","type":"solution"}