{"id":76,"date":"2020-05-03T12:38:44","date_gmt":"2020-05-03T12:38:44","guid":{"rendered":"http:\/\/redhost:8888\/documentation\/?page_id=76"},"modified":"2022-12-22T18:01:26","modified_gmt":"2022-12-22T18:01:26","slug":"header","status":"publish","type":"page","link":"https:\/\/docs.redsun.design\/soulkitchen\/header\/","title":{"rendered":"The Header"},"content":{"rendered":"\n

The Top Bar<\/a>
The Logo<\/a>
The Navigation Menu<\/a>
The Header Layout <\/a>
Transparent Header<\/a><\/p>\n\n\n\n

The Top Bar<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
    \n
  1. Go to Appearance \u2192 Customize \u2192 Layout \u2192 Top Bar<\/strong>
    Here you can add\/remove a search icon, social icons, cart icon, account icon, enter an address (and optionally link it Google Maps or the contact page), phone number, business hours, email or other info.
    (The social icons can be set up at Appearance \u2192 Customize \u2192 Connect \u2192<\/strong> Social Accounts<\/strong> )<\/li>\n<\/ol>\n\n\n\n

    The Logo<\/h4>\n\n\n\n
      \n
    1. Go to Appearance \u2192<\/strong> Customizer \u2192<\/strong> Site Identity <\/strong>.<\/li>\n\n\n\n
    2. Here you can upload your logo, as well as the logo for transparent headers.
      (It is recommended to upload your logo twice the width and height that you actually want to display it so it looks sharp on Retina screens. For example if you wish to display a logo with a width of 200px and a height of 100px, upload a logo with a width of 400px and a height of 200px.)<\/li>\n\n\n\n
    3. Below, enter your logo’s width.
      (For example if you uploaded a logo with a width of 400px, enter 200.)<\/li>\n<\/ol>\n\n\n
      \n
      \"\"<\/figure><\/div>\n\n\n

      The Navigation Menu<\/h4>\n\n\n\n
        \n
      1. Click Appearance > Menus<\/strong>.<\/li>\n\n\n\n
      2. Create a new menu or edit the existing one. Detailed instructions on how to work with the WordPress menu can be found in the WordPress Menu User Guide<\/a><\/li>\n<\/ol>\n\n\n\n
          \n
        1. In Menu Settings<\/strong> select Display location Primary<\/strong> and click Save Menu<\/strong>.<\/li>\n<\/ol>\n\n\n
          \n
          \"\"<\/figure><\/div>\n\n\n
            \n
          1. Click on the drop down arrow of a menu item to change the Navigation Label or if you want to open the menu item in a new tab.<\/li>\n<\/ol>\n\n\n
            \n
            \"\"<\/figure><\/div>\n\n\n
              \n
            1. Click Screen Options<\/strong> in the top right corner for more options.<\/li>\n<\/ol>\n\n\n\n

              The Header Layout<\/h4>\n\n\n\n
                \n
              1. Go to Appearance \u2192<\/strong><\/strong> Customizer \u2192<\/strong><\/strong> Layout \u2192<\/strong><\/strong> Header <\/strong>.<\/li>\n\n\n\n
              2. The theme includes 4 header layout options:
                – Logo centered between Navigation items <\/mark>
                – Navigation below Logo
                – Logo left – Navigation right and
                – Side Navigation<\/li>\n<\/ol>\n\n\n\n

                INFO:<\/strong>
                The option “Logo centered between Navigation options” will only work if a menu is assigned to the Primary Menu Display Location<\/a>. <\/p>\n\n\n\n

                Transparent Header<\/h4>\n\n\n\n
                \"\"<\/figure>\n\n\n\n
                How to set a transparent Header for single pages:<\/h6>\n\n\n\n
                  \n
                • Add a new page or edit an existing one. <\/li>\n\n\n\n
                • In the right sidebar, click Page and scroll down to Page Settings.<\/li>\n\n\n\n
                • Check the following settings:\n
                    \n
                  • Hide Page Title<\/li>\n\n\n\n
                  • Remove Page Padding Top<\/li>\n\n\n\n
                  • Transparent Header<\/li>\n\n\n\n
                  • Optionally you can also select a different logo and navigation color. For example if your regular logo is black but you wish to add a transparent header above a dark background, you can upload a white logo in the Customizer at\u00a0Appearance \u2192 Customize \u2192 Site Identity \u2192 Logo for Transparent Header<\/strong> and select white navigation color at Appearance \u2192 Customize \u2192 Colors \u2192 Transparent Navigation.<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n
                    \n
                    \"\"<\/figure><\/div>","protected":false},"excerpt":{"rendered":"The Top BarThe LogoThe Navigation MenuThe Header Layout Transparent Header The Top Bar Go to Appearance \u2192 Customize \u2192 Layout \u2192 Top BarHere you can add\/remove a search icon, social ...","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":35,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-76","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/pages\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":10,"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/pages\/76\/revisions"}],"predecessor-version":[{"id":4490,"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/pages\/76\/revisions\/4490"}],"wp:attachment":[{"href":"https:\/\/docs.redsun.design\/soulkitchen\/wp-json\/wp\/v2\/media?parent=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}