{"id":976,"date":"2017-04-27T13:52:14","date_gmt":"2017-04-27T13:52:14","guid":{"rendered":"https:\/\/stage.pikarthouse.com\/wp\/ombra-documentation\/?page_id=976"},"modified":"2017-12-12T14:20:49","modified_gmt":"2017-12-12T14:20:49","slug":"header","status":"publish","type":"page","link":"https:\/\/ombra.pikarthouse.com\/documentation\/theme-options\/header\/","title":{"rendered":"Header"},"content":{"rendered":"<p>The Header options will affect the <em>Site Header<\/em> look and functionalities.\u00a0This section is variable, depending on <strong>Layout<\/strong> options like:<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p style=\"padding-left: 30px;\"><strong>Main-navigation \u2192\u00a0Position<br \/>\nMain-navigation \u2192\u00a0Type.<\/strong><\/p>\n<p>In all of the cases, it contains options related to Header layout and Header search area.<\/p>\n<p>However, there are options specific for different typologies of Header, like Sidebar or Menu options.<\/p>\n<p>Header settings are as follows:<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\">\n<div \t\tclass=\"pikode pikode--row  summary-box\" style=\"margin: 0px -36px 0px 0px;\" >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t\t<div class=\"pikode--row__background\">\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"color-overlay\" style=\"opacity: 1; background-color: #4b917d;\" ><\/div>\n\t\t\t\t\t\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-light\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\" style=\"padding: 0px 30px 0px 30px;\" >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; line-height: 1.0; text-decoration: none; color: #ffffff; padding: 36px 0px 0px 0px;\"><p>Summary<\/p><\/div>\n<p><a href=\"#top-classic\">Position Top<\/a><\/p>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: -24px 0px 0px 24px;\"><p><a href=\"#top-classic\">Classic<\/a><br \/>\n<a href=\"#top-branding\">Branding<\/a><br \/>\n<a href=\"#top-fullscreen\">Fullscreen<br \/>\n<\/a><a href=\"#top-aside\">Aside<\/a><\/p><\/div>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: -24px 0px 0px 0px;\"><p><a href=\"#side-classic\">Position\u00a0Side<\/a><\/p><\/div>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: -24px 0px 0px 24px;\"><p><a href=\"#side-classic\">Classic<\/a><br \/>\n<a href=\"#side-aside\">Aside<\/a><\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div>\n\n<div id=\"top-classic\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/main\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Position Top \u2192 Classic<\/span><\/a><\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<p>This type of Site Header, being the most popular of all, has the most options. It consists of the Logo (standing on its left side),\u00a0the icons (social icons, search icon, sidebar icon) and the main menu between those two.<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Layout<\/p><\/div>\n<p>Choose between different properties which will affect color style, spacing or the way the Site Header behaves<\/p>\n<ul>\n<li><strong>Color style\u00a0<\/strong>\u2014 affects both the backgound color and text items color of Site Header\n<ul>\n<li><strong>Background\u00a0<\/strong>\u2014 background color of Site Header<\/li>\n<li><strong>Background transparency\u00a0<\/strong>\u2014 transparency level of background color, <em>measured in percents<\/em> <em>(valid values from 1 to 100)<\/em><\/li>\n<li><strong>Color skin\u00a0<\/strong>\u2014\u00a0color skin of Site Header items: menu items, icons, logo. You could choose between <em><strong>Light\u00a0<\/strong><\/em>(or <em>white<\/em>) and <strong><em>Dark\u00a0<\/em><\/strong>(almost <em>black)<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--inherit\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: 81px 0px 0px 0px;\"><p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2792 size-full\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_classic.png\" alt=\"\" width=\"400\" height=\"400\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_classic.png 400w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_classic-150x150.png 150w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_classic-300x300.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p><\/div><\/div><\/div>\n<ul>\n<li><strong>Spacing\u00a0<\/strong>\u00a0\u2014 space, either <strong>vertical<\/strong> <em>(top &amp; bottom)<\/em> or <strong>horizontal<\/strong> <em>(right or left)<\/em>, around Site Header, <em>measured in pixels<\/em><\/li>\n<li><strong>Behaviour\u00a0<\/strong>\u2014 choose the way Site Header behaves; it could be:\n<ul>\n<li><strong>Regular\u00a0<\/strong>\u2014\u00a0this is a standard Site Header that stays on top of the page. When viewers scroll down, it goes out of view. This a good choice if you want a simple and elegant look for your site<\/li>\n<li><strong>Fixed\u00a0<\/strong>\u2014 this type of Site Header stays fixed on top of the page when visitors scroll. This is a good choice if you want your viewers to have access to <em>Main navigation<\/em>\u00a0all the time<\/li>\n<li><strong>Sticky\u00a0<\/strong>\u2014\u00a0this type of header is initially on top of the page and goes out of view when visitors\u00a0scroll down (after a certain amount of scroll from the page top). This type of behaviour has similarities with both <strong>Regular<\/strong> and <strong>Fixed<\/strong> header, because it stays <em>F<\/em><em>ixed<\/em> a certain amount of scroll, then goes out of visitors view, like <em>Regular<\/em> header behaves. It is a good choice if you have content at the top of your pages which you don&#8217;t want to obstruct by a fixed header<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Menu<\/p><\/div>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>This is the most important menu of your site. It has the following options:<\/p>\n<ul>\n<li><strong>Main menu\u00a0<\/strong>\u2014 the main menu of theme and it refers to first level menu items\n<ul>\n<li><strong>Position\u00a0<\/strong>\u2014 choose an alignment for your main menu inside Site Header: <em>Left, Center<\/em> or <em>Right<\/em><\/li>\n<li><strong>Font-size\u00a0<\/strong>\u2014 menu items could have a certain font-size,\u00a0measured\u00a0<em>in pixels<\/em><\/li>\n<li><strong>Font-weight\u00a0<\/strong>\u2014 how light or bold the menu items could look<\/li>\n<li><strong>Letter-spacing\u00a0<\/strong>\u2014 the space between letters of menu items, measured\u00a0<em>in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 36px 36px 6px 36px; margin: 12px -36px 0px 0px; background-color: #f1f1f1;\"><p>All the\u00a0types of Site Headers have\u00a0mainly the same options as <strong><em>Position Top<\/em><\/strong>\u00a0\u2192 <strong><em>Classic<\/em><\/strong>, <em>which we will consider<\/em> <em><strong>the reference Site Header<\/strong><\/em>.<\/p>\n<p>However, they differentiate from each other by having specific options or by missing couple of them.<\/p><\/div><\/div><\/div>\n<ul>\n<li><strong>Submenus\u00a0<\/strong>\u2014 the Dropdown menus of <em>Main menu<\/em> items\n<ul>\n<li><strong>Color skin\u00a0<\/strong>\u2014\u00a0color skin for Dropdown menus. You could choose between <em><strong>Light\u00a0<\/strong><\/em>(or <em>white<\/em>) and <strong><em>Dark\u00a0<\/em><\/strong>(almost <em>black)<\/em><\/li>\n<li><strong>Font-size\u00a0<\/strong>\u2014 menu items could have a certain font-size,\u00a0measured\u00a0<em>in pixels<\/em><\/li>\n<li><strong>Font-weight\u00a0<\/strong>\u2014 how light or bold the menu items could look<\/li>\n<li><strong>Letter-spacing\u00a0<\/strong>\u2014 the space between letters of menu items, measured\u00a0<em>in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n<li><strong>Social menu\u00a0<\/strong>\u00a0\u2014 the social menu of theme, that consists of social icons\n<ul>\n<li><strong>Font-size\u00a0<\/strong>\u2014 social icons could have a certain font-size,\u00a0measured\u00a0<em>in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3544\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/12\/Site_header_menus.jpg\" alt=\"\" width=\"800\" height=\"600\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/12\/Site_header_menus.jpg 1500w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/12\/Site_header_menus-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/12\/Site_header_menus-768x576.jpg 768w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/12\/Site_header_menus-1024x768.jpg 1024w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Search Area<\/p><\/div>\n<p>When Search Area is enabled, a search icon appears in the Site Header and when clicked, a search bar will unfold, <em>depending on its behaviour<\/em>, either at the top of the page or in fullscreen mode.<\/p>\n<ul>\n<li><strong>Enabled\u00a0<\/strong>\u2014\u00a0check this if you want to have a Search Area for your site<\/li>\n<li><strong>Color style\u00a0<\/strong>\u2014 affects both the backgound color and content\u00a0items color of\u00a0Search Area\n<ul>\n<li><strong>Background\u00a0<\/strong>\u2014 background color of Search Area<\/li>\n<li><strong>Color skin\u00a0<\/strong>\u00a0\u2014 color skin of Search Area\u00a0items (it refers at those items\u00a0which\u00a0appear when Search Area icon is clicked): search text field, explanation text, close-button. You could choose between <em><strong>Light\u00a0<\/strong><\/em>(or <em>white<\/em>) and <strong><em>Dark\u00a0<\/em><\/strong>(almost <em>black)<\/em><\/li>\n<\/ul>\n<\/li>\n<li><strong>Behaviour\u00a0<\/strong>\u00a0\u2014 choose the way Search\u00a0Area\u00a0behaves; it could be:\n<ul>\n<li><strong>Slide from Window Top\u00a0<\/strong>\u2014 when the search-icon is clicked, the Search Area slides from browser window top, pushing the Site Content to the bottom with a certain amount of pixels<\/li>\n<li><strong>Covering header\u00a0<\/strong>\u2014 when the search-icon is clicked, the Search Area\u00a0covers the\u00a0Site Header with a certain amount of pixels<\/li>\n<li><strong>Fullscreen\u00a0<\/strong>\u2014\u00a0when the search-icon is clicked, the Search Area\u00a0covers\u00a0the whole screen<\/li>\n<\/ul>\n<\/li>\n<li><strong>Text field\u00a0<\/strong>\u2014\u00a0this is the text that appears by default in the search field<\/li>\n<li><strong>Menu icon\u00a0<\/strong>\u2014\u00a0the Search Area icon located in <em>Main menu<\/em> of theme\n<ul>\n<li><strong>Font-size\u00a0<\/strong>\u2014 search icon could have a certain font-size,\u00a0measured\u00a0<em>in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n<div id=\"sidebar\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Sidebar<\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<p>The Sidebar displays\u00a0information other than the main content of the web page. When enabled, a sidebar icon appears\u00a0in the header and when clicked, a right sidebar will unfold. You can fill the sidebar with content by adding widgets in <em>Appearance \u2192\u00a0Widgets<\/em>.<\/p>\n<ul>\n<li><strong>Enabled\u00a0<\/strong>\u2014\u00a0check this if you want to have a Sidebar\u00a0linked to the Site Header<\/li>\n<li><strong>Color style\u00a0<\/strong>\u2014 affects both the backgound color and content\u00a0items color of the Sidebar\n<ul>\n<li><strong>Background\u00a0<\/strong>\u2014 background color of\u00a0Sidebar<\/li>\n<li><strong>Color skin\u00a0<\/strong>\u00a0\u2014 color skin of Sidebar\u00a0items (it refers at those items\u00a0which\u00a0appear when Sidebar\u00a0icon is clicked): its title and widgets. You could choose between <em><strong>Light\u00a0<\/strong><\/em>(or <em>white<\/em>) and <strong><em>Dark\u00a0<\/em><\/strong>(almost <em>black)<\/em><\/li>\n<\/ul>\n<\/li>\n<li><strong>Spacing\u00a0<\/strong>\u00a0\u2014 the amount of space the Sidebar could have\n<ul>\n<li><strong>Width\u00a0<\/strong>\u2014 sidebar width,\u00a0measured in pixels<\/li>\n<li><strong>Top &amp; bottom\u00a0<\/strong>\u2014 vertical spacing around Sidebar content (title and widgets),\u00a0measured in <em>pixels<\/em><\/li>\n<li><strong>Left &amp; right\u00a0<\/strong>\u2014 horizontal spacing around Sidebar content (title and widgets),\u00a0measured in <em>pixels<\/em><\/li>\n<\/ul>\n<\/li>\n<li><strong>Title\u00a0<\/strong>\u2014\u00a0this is the text that appears by default in the search field<\/li>\n<li><strong>Menu icon\u00a0<\/strong>\u2014\u00a0the Header Sidebar icon located in <em>Main menu<\/em> of theme\n<ul>\n<li><strong>Size\u00a0<\/strong>\u2014 sidebar icon could have a certain size <em>(small, medium, large)<\/em>,\u00a0measured\u00a0<em>in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Mobile Menu<\/p><\/div>\n<p>The Site Header of Ombra Theme has a specific look on mobile devices in order to adapt itself to the screen size. As the Site Header appears with a different layout, you might need to change couple of its style options.<\/p>\n<ul>\n<li><strong>Color style\u00a0<\/strong>\u2014 affects both the backgound color and content\u00a0items color of Site Header on mobile devices\n<ul>\n<li><strong>Background\u00a0<\/strong>\u2014 background color of\u00a0Mobile Menu<\/li>\n<li><strong>Color skin\u00a0<\/strong>\u00a0\u2014 color skin of Mobile Menu items. You could choose between <em><strong>Light\u00a0<\/strong><\/em>(or <em>white<\/em>) and <strong><em>Dark\u00a0<\/em><\/strong>(almost <em>black)<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n<div id=\"top-branding\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/fashion\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Position Top \u2192\u00a0Branding<\/span><\/a><\/p><\/div>\n<p>It consists of the Logo (big in size, it stands in the center of Site Header, above its icons and the main menu), the main menu\u00a0and the icons (social icons, search icon, sidebar icon), standing next to the menu.<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>The\u00a0options that set apart this type of Site Header from\u00a0<strong><em>Position Top<\/em><\/strong>\u00a0\u2192 <strong><em>Classic\u00a0<\/em><\/strong>are presented below.<\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Menu<\/p><\/div>\n<p>It has almost the same options as\u00a0<strong><em>Position Top<\/em><\/strong>\u00a0\u2192 <strong><em>Classic<\/em><\/strong>,\u00a0but there is one option that missing in this case: <em>Menu \u2192\u00a0Position\u00a0<\/em>(as the menu\u00a0has just one position).<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--inherit\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none;\"><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2793\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_branding.png\" alt=\"\" width=\"400\" height=\"400\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_branding.png 400w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_branding-150x150.png 150w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_branding-300x300.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p><\/div><\/div><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"top-fullscreen\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/musicband\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Position Top \u2192 Fullscreen<\/span><\/a><\/p><\/div>\n<p>This type\u00a0of Site Header is useful when you have a few menu items and want to preserve the site as clean as possible, hiding away the navigation items, like <em>menu, social icons or search tool<\/em>. <em>This is the reason, the Fullscreen Site Header does not have a Sidebar.<\/em><\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>Instead of Sidebar button, this time there will be a <strong><em>Menu icon<\/em><\/strong>\u00a0on the right side of main navigation and when clicked,\u00a0<em>a fullscreen menu opens<\/em>.<\/p>\n<p>The\u00a0options that set apart this type of Site Header from\u00a0<strong><em>Position Top<\/em><\/strong>\u00a0\u2192 <strong><em>Classic\u00a0<\/em><\/strong>are presented below.<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--inherit\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: -24px 0px 0px 0px;\"><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2794\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_fullscreen.png\" alt=\"\" width=\"400\" height=\"400\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_fullscreen.png 400w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_fullscreen-150x150.png 150w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_fullscreen-300x300.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p><\/div><\/div><\/div>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Menu<\/p><\/div>\n<p>The menu is not visible at first view, it appears just in Fullscreen mode, after clicking the menu button from top right corner of the browser window.<\/p>\n<ul>\n<li><strong>Color style\u00a0<\/strong>\u2014 affects both the backgound color and content\u00a0items color of the\u00a0<em>Fullscreen menu<\/em> that appears when the\u00a0<em>Fullscreen menu icon<\/em>\u00a0is clicked\n<ul>\n<li><strong>Background\u00a0<\/strong>\u2014 background color of\u00a0<em>Fullscreen menu<\/em><\/li>\n<li><strong>Color skin\u00a0<\/strong>\u00a0\u2014 color skin of <em>Fullscreen menu<\/em> items (it refers at those items\u00a0which\u00a0appear when <em>Fullscreen menu icon<\/em>\u00a0is clicked). You could choose between <em><strong>Light\u00a0<\/strong><\/em>(or <em>white<\/em>) and <strong><em>Dark\u00a0<\/em><\/strong>(almost <em>black)<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Search Area<\/p><\/div>\n<p>It has almost the same options as <strong><em>Position Top<\/em><\/strong>\u00a0\u2192 <strong><em>Classic<\/em><\/strong>, excepting <strong><em>Behaviour<\/em><\/strong>.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"top-aside\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p>Position Top \u2192\u00a0Aside<\/p><\/div>\n<p>As <em>Fullscreen Site Header<\/em>, this type\u00a0of header is useful when you have a few menu items and want to preserve the site as clean as possible, hiding away the navigation items, like <em>menu, social icons or search tool<\/em>.<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>It is very similar to <strong><em>Position Top<\/em><\/strong>\u00a0\u2192 <strong><em>Fullscreen\u00a0<\/em><\/strong>and has exactly\u00a0same options as it.<\/p>\n<p><em>This is the reason the Aside\u00a0Site Header does not have a Sidebar. <\/em>Instead of Sidebar button, there is\u00a0a\u00a0<strong><em>menu icon<\/em><\/strong>\u00a0on the right side of main navigation and when clicked, an\u00a0<em>aside menu opens<\/em>.<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--inherit\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: -24px 0px 0px 0px;\"><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2795\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_aside.png\" alt=\"\" width=\"400\" height=\"400\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_aside.png 400w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_aside-150x150.png 150w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/H_aside-300x300.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p><\/div><\/div><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"side-classic\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/photography\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Position Side\u00a0\u2192\u00a0Classic<\/span><\/a><\/p><\/div>\n<p>This type\u00a0of Site Header is useful when you need a side main navigation, always present on the left part of your site. It\u00a0stays fixed in place and will not scroll when viewers scroll down the page.\u00a0<em>It\u00a0does not have a Sidebar.<\/em><\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>It has almost the same options as\u00a0<strong><em>Position Top<\/em><\/strong>\u00a0\u2192 <strong><em>Classic. <\/em><\/strong>However, there are options that set\u00a0it apart.<\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Layout<\/p><\/div>\n<p>The only option that\u00a0is different from those of\u00a0<strong><em>Position Top<\/em><\/strong>\u00a0\u2192 <strong><em>Classic<\/em><\/strong> is presented below.<\/p>\n<ul>\n<li><strong>Layout\u00a0<\/strong>\u2192 <strong>Spacing<\/strong>\n<ul>\n<li><strong>Width\u00a0<\/strong>\u2014 header\u00a0width,\u00a0<em>measured in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--inherit\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: -24px 0px 0px 0px;\"><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2796\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/V_classic.png\" alt=\"\" width=\"400\" height=\"400\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/V_classic.png 400w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/V_classic-150x150.png 150w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/V_classic-300x300.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p><\/div><\/div><\/div>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Search Area<\/p><\/div>\n<p>When Search Area is enabled, a search icon appears in the Site Header\u00a0and when clicked, a search bar will unfold in fullscreen mode. It has almost the same options as <strong><em>Position Top<\/em><\/strong>\u00a0\u2192 <strong><em>Classic<\/em><\/strong>, excepting <strong><em>Behaviour<\/em><\/strong>.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n<div id=\"side-aside\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><a href=\"https:\/\/ombra.pikarthouse.com\/agency\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Position Side\u00a0\u2192\u00a0Aside<\/span><\/a><\/p><\/div>\n<p>As <em>Top \u2192\u00a0Fullscreen or Aside Site Header<\/em>, this type\u00a0of header is useful when you have a few menu items and want to preserve the site as clean as possible, hiding away the navigation items, like <em>menu, social icons or search tool<\/em>.<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>It is very similar to <strong><em>Position Side<\/em><\/strong>\u00a0\u2192 <em><strong>Classic<\/strong><\/em><strong><em>\u00a0<\/em><\/strong>and has exactly\u00a0same options as it.<\/p>\n<p>The unique\u00a0<strong><em>menu icon<\/em><\/strong>\u00a0on the left\u00a0side of your site will remind visitor to search for <em>main navigation<\/em>, which \u2014and when clicked \u2014 will make visible the Site Header.<\/p>\n<p>The <em><strong>menu icon<\/strong><\/em> stays fixed in place and will not scroll when viewers scroll down the page.<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--inherit\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: 0px 0px 0px 0px;\"><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2797\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/V_aside.png\" alt=\"\" width=\"400\" height=\"400\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/V_aside.png 400w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/V_aside-150x150.png 150w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/04\/V_aside-300x300.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p><\/div><\/div><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>The Header options will affect the Site Header look and functionalities.\u00a0This section is variable, depending on Layout options like: This type of Site Header, being the most popular of all, has the most options. It consists of the Logo (standing on its left side),\u00a0the icons (social icons, search icon, sidebar icon) and the main menu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":847,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-976","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/comments?post=976"}],"version-history":[{"count":26,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/976\/revisions"}],"predecessor-version":[{"id":3545,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/976\/revisions\/3545"}],"up":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/847"}],"wp:attachment":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/media?parent=976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}