{"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":"2018-10-03T14:46:25","modified_gmt":"2018-10-03T14:46:25","slug":"header","status":"publish","type":"page","link":"https:\/\/nels.pikarthouse.com\/documentation\/theme-options\/header\/","title":{"rendered":"Header"},"content":{"rendered":"

The Header options will affect the Site Header look and functionalities<\/strong><\/em>. They include features tied to layout & design, both primary and social menus, search area, sidebar for inserting widgets and Above Area, conceived for site additional notices.<\/p>\n

Not at last, there is a separate section for choosing the mobile menu color skins.<\/p>\n

Header settings are as follows:<\/p><\/div>

\n
\n\n\t
\n\n\t\t
\n\n\t\t\t\n\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t
\n\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Summary<\/p><\/div>\n

Layout<\/a>
\nMenu<\/a>
\nSearch Area<\/a>
\nSidebar<\/a>
\nAbove Area<\/a>
\nMobile Menu<\/a><\/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<\/div><\/div>\n\n

\n\n\t
\n\n\t\t
\n\n\t\t\t\n\t\t\t
\n\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Layout<\/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

Choose between different properties which will affect color style, spacing or the way the Site Header behaves<\/p>\n

    \n
  • Color style\u00a0<\/strong>\u2014 affects both the backgound color and text items color of Site Header\n
      \n
    • Background\u00a0<\/strong>\u2014 background color of Site Header<\/li>\n
    • Background transparency\u00a0<\/strong>\u2014 transparency level of background color, measured in percents<\/em> (valid values from 1 to 100)<\/em><\/li>\n
    • Color skin\u00a0<\/strong>\u2014\u00a0color skin of Site Header items: menu items, icons, logo. You could choose between Light\u00a0<\/strong><\/em>(or white<\/em>) and Dark\u00a0<\/em><\/strong>(almost black)<\/em><\/li>\n
    • Light Color Skin\u00a0<\/strong>\u2014 choose the color for Light Skin<\/li>\n
    • Dark Color Skin\u00a0<\/strong>\u2014 choose the color for Dark Skin<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
        \n
      • Spacing\u00a0<\/strong>\u00a0\u2014 space, either vertical<\/strong> (top & bottom)<\/em> or horizontal<\/strong> (right or left)<\/em>, around Site Header, measured in pixels<\/em><\/li>\n
      • Border Bottom<\/strong> \u2014 choose color and width for the bottom border of Site Header (pixels)\n
          \n
        • Color \u2014 choose the color for border<\/li>\n
        • Width (pixels)<\/li>\n<\/ul>\n<\/li>\n
        • Enable shadow<\/strong>\u00a0\u2014 add shadow to Site Header<\/li>\n
        • Behaviour\u00a0<\/strong>\u2014 choose the way Site Header behaves; it could be:\n
            \n
          • 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
          • 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 Main navigation<\/em>\u00a0all the time.<\/li>\n
          • 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). Then, it appears again, but not including Above Area (if enabled) this time.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n
            \n\n\t
            \n\n\t\t
            \n\n\t\t\t\n\t\t\t
            \n\n\t\t\t\t
            \n\t\t\t\t\t
            \n\t\t\t\t\t\t

            Menu<\/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

            This is the most important menu of your site. It has the following options:<\/p>\n

              \n
            • Main menu\u00a0<\/strong>\u2014 the main menu of theme and it refers to first level menu items\n
                \n
              • Top & Bottom Spacing<\/strong><\/li>\n
              • Position\u00a0<\/strong>\u2014 (valid just for Logo Side) choose an alignment for your main menu inside Site Header: Left, Center<\/em> or Right<\/em><\/li>\n
              • Font-size\u00a0<\/strong>\u2014 menu items could have a certain font-size,\u00a0measured\u00a0in pixels<\/em><\/li>\n
              • Font-weight\u00a0<\/strong>\u2014 how light or bold the menu items could look<\/li>\n
              • Letter-spacing\u00a0<\/strong>\u2014 the space between letters of menu items, measured\u00a0in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                  \n
                • Submenus\u00a0<\/strong>\u2014 the Dropdown menus of Main menu<\/em> items\n
                    \n
                  • Background\u00a0<\/strong>\u2014 choose any color from color\u00a0picker.<\/li>\n
                  • Color skin\u00a0<\/strong>\u2014\u00a0color skin for Dropdown menus. You could choose between Light\u00a0<\/strong><\/em>(or white<\/em>) and Dark\u00a0<\/em><\/strong>(almost black)<\/em><\/li>\n
                  • Font-size\u00a0<\/strong>\u2014 menu items could have a certain font-size,\u00a0measured\u00a0in pixels<\/em><\/li>\n
                  • Font-weight\u00a0<\/strong>\u2014 how light or bold the menu items could look<\/li>\n
                  • Letter-spacing\u00a0<\/strong>\u2014 the space between letters of menu items, measured\u00a0in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n
                  • Social menu\u00a0<\/strong>\u00a0\u2014 the social menu of theme, that consists of social icons\n
                      \n
                    • Font-size\u00a0<\/strong>\u2014 social icons could have a certain font-size,\u00a0measured\u00a0in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                      \"\"<\/p>\n\n

                      \n\n\t
                      \n\n\t\t
                      \n\n\t\t\t\n\t\t\t
                      \n\n\t\t\t\t
                      \n\t\t\t\t\t
                      \n\t\t\t\t\t\t

                      Search Area<\/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

                      When Search Area is enabled, a search icon appears in the Site Header and when clicked, a search bar will unfold, depending on its behaviour<\/em>, either at the top of the page or in fullscreen mode.<\/p>\n

                        \n
                      • Enabled\u00a0<\/strong>\u2014\u00a0check this if you want to have a Search Area for your site<\/li>\n
                      • Color style\u00a0<\/strong>\u2014 affects both the backgound color and content\u00a0items color of\u00a0Search Area\n
                          \n
                        • Background\u00a0<\/strong>\u2014 background color of Search Area<\/li>\n
                        • 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 Light\u00a0<\/strong><\/em>(or white<\/em>) and Dark\u00a0<\/em><\/strong>(almost black)<\/em><\/li>\n<\/ul>\n<\/li>\n
                        • Behaviour\u00a0<\/strong>\u00a0\u2014 choose the way Search\u00a0Area\u00a0behaves; it could be:\n
                            \n
                          • 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
                          • Fullscreen\u00a0<\/strong>\u2014\u00a0when the search-icon is clicked, the Search Area\u00a0covers\u00a0the whole screen<\/li>\n<\/ul>\n<\/li>\n
                          • Text field\u00a0<\/strong>\u2014\u00a0this is the text that appears by default in the search field<\/li>\n<\/ul>\n\n
                            \n\n\t
                            \n\n\t\t
                            \n\n\t\t\t\n\t\t\t
                            \n\n\t\t\t\t
                            \n\t\t\t\t\t
                            \n\t\t\t\t\t\t

                            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

                            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 Appearance \u2192\u00a0Widgets<\/em>.<\/p>\n

                              \n
                            • Enabled\u00a0<\/strong>\u2014\u00a0check this if you want to have a Sidebar\u00a0linked to the Site Header<\/li>\n
                            • Color style\u00a0<\/strong>\u2014 affects both the backgound color and content\u00a0items color of the Sidebar\n
                                \n
                              • Background\u00a0<\/strong>\u2014 background color of\u00a0Sidebar<\/li>\n
                              • 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 Light\u00a0<\/strong><\/em>(or white<\/em>) and Dark\u00a0<\/em><\/strong>(almost black)<\/em><\/li>\n<\/ul>\n<\/li>\n
                              • Spacing\u00a0<\/strong>\u00a0\u2014 the amount of space the Sidebar could have\n
                                  \n
                                • Width\u00a0<\/strong>\u2014 sidebar width,\u00a0measured in pixels<\/li>\n
                                • Top & bottom\u00a0<\/strong>\u2014 vertical spacing around Sidebar content (title and widgets),\u00a0measured in pixels<\/em><\/li>\n
                                • Left & right\u00a0<\/strong>\u2014 horizontal spacing around Sidebar content (title and widgets),\u00a0measured in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n
                                • Title\u00a0<\/strong>\u2014\u00a0this is the text that appears by default in the search field<\/li>\n
                                • Menu icon\u00a0<\/strong>\u2014\u00a0the Header Sidebar icon located in Main menu<\/em> of theme\n
                                    \n
                                  • Size\u00a0<\/strong>\u2014 sidebar icon could have a certain size (small, medium, large)<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n
                                    \n\n\t
                                    \n\n\t\t
                                    \n\n\t\t\t\n\t\t\t
                                    \n\n\t\t\t\t
                                    \n\t\t\t\t\t
                                    \n\t\t\t\t\t\t

                                    Above Area<\/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

                                    The area is displayed right above the Site Header and is conceived for additional notices and tools (like menus and social icons) for your site. It consists of the following options:<\/p>\n

                                      \n
                                    • Color Style \u2014 <\/strong>affects both the backgound color and text items color of Above Area\n
                                        \n
                                      • Background\u00a0<\/strong>\u2014 background color of Above Area<\/li>\n
                                      • Color skin\u00a0<\/strong>\u00a0\u2014 color skin of Above Area\u00a0items. You could choose between Light\u00a0<\/strong><\/em>(or white<\/em>) and Dark\u00a0<\/em><\/strong>(almost black)<\/em><\/li>\n<\/ul>\n<\/li>\n
                                      • Spacing (pixels) \u2014 <\/strong>the amount of space the Above Area could have\n
                                          \n
                                        • Top & bottom\u00a0<\/strong>\u2014 vertical spacing around Above Area content,\u00a0measured in pixels<\/em><\/li>\n
                                        • Left & right\u00a0<\/strong>\u2014 horizontal spacing around Above Area content,\u00a0measured in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n
                                        • Border Bottom \u2014 <\/strong>choose color and width for the bottom border of Site Header (pixels)<\/li>\n
                                        • Site Notice\u00a0\u2014 <\/strong>enter the site additional notices here\n
                                            \n
                                          • Font-size\u00a0<\/strong>\u2014 site notice font-size,\u00a0measured\u00a0in pixels<\/em><\/li>\n
                                          • Font-weight\u00a0<\/strong>\u2014 how light or bold the site notice could look<\/li>\n<\/ul>\n<\/li>\n
                                          • Menu \u2014 <\/strong>the Above Area menu\n
                                              \n
                                            • Font-size\u00a0<\/strong>\u2014 menu items could have a certain font-size,\u00a0measured\u00a0in pixels<\/em><\/li>\n
                                            • Font-weight\u00a0<\/strong>\u2014 how light or bold the menu items could look<\/li>\n
                                            • Letter-spacing\u00a0<\/strong>\u2014 the space between letters of menu items, measured\u00a0in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n
                                            • Social menu\u00a0<\/strong>\u00a0\u2014 the Above Area social menu, that consists of social icons\n
                                                \n
                                              • Font-size\u00a0<\/strong>\u2014 social icons could have a certain font-size,\u00a0measured\u00a0in pixels<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n
                                                \n\n\t
                                                \n\n\t\t
                                                \n\n\t\t\t\n\t\t\t
                                                \n\n\t\t\t\t
                                                \n\t\t\t\t\t
                                                \n\t\t\t\t\t\t

                                                Mobile Menu<\/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

                                                The Site Header of your 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

                                                  \n
                                                • Color style\u00a0<\/strong>\u2014 affects both the backgound color and content\u00a0items color of Site Header on mobile devices\n
                                                    \n
                                                  • Background\u00a0<\/strong>\u2014 background color of\u00a0Mobile Menu<\/li>\n
                                                  • Color skin\u00a0<\/strong>\u00a0\u2014 color skin of Mobile Menu items. You could choose between Light\u00a0<\/strong><\/em>(or white<\/em>) and Dark\u00a0<\/em><\/strong>(almost black)<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                                                    Choose between different properties which will affect color style, spacing or the way the Site Header behaves Color style\u00a0\u2014 affects both the backgound color and text items color of Site Header Background\u00a0\u2014 background color of Site Header Background transparency\u00a0\u2014 transparency level of background color, measured in percents (valid values from 1 to 100) Color skin\u00a0\u2014\u00a0color […]<\/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:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/comments?post=976"}],"version-history":[{"count":4,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/976\/revisions"}],"predecessor-version":[{"id":4249,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/976\/revisions\/4249"}],"up":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/847"}],"wp:attachment":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/media?parent=976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}