{"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-02-03T12:47:44","modified_gmt":"2022-02-03T12:47:44","slug":"header","status":"publish","type":"page","link":"https:\/\/docs.redsun.design\/amaya\/header\/","title":{"rendered":"The Header"},"content":{"rendered":"\n

The Top Bar<\/a>
The Logo<\/a>
The 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
  1. Go to Appearance \u2192 Customize \u2192 Layout \u2192 Top Bar<\/strong>
    Here you can enter an address (and optionally link it Google Maps or the contact page), phone number, business hours, email or other info.<\/li>
  2. Go to Appearance \u2192 Customize \u2192 Layout \u2192 Header<\/strong>
    Here you can find the options to add\/remove a search button, social icons and a cart icon.
    (The social icons can be set up at Appearance \u2192 Customize \u2192 Connect \u2192<\/strong> Social Accounts<\/strong> )<\/li><\/ol>\n\n\n\n

    The Logo<\/h4>\n\n\n\n
    1. Go to\u00a0Appearance \u2192<\/strong> Customizer \u2192<\/strong> Site Identity\u00a0<\/strong>.<\/li>
    2. Click\u00a0Select logo\u00a0<\/strong>and upload your logo.
      (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>
    3. Below, enter your logo’s width.
      (For example if you uploaded a logo with a width of 400px, enter 200.)<\/li>
    4. If you are using a transparent header on any of your pages, you need to additionally upload a logo for the transparent header as well. You can do that in Appearance \u2192 Customizer \u2192 Layout \u2192 Header \u2192 Transparent Header<\/strong>.<\/li><\/ol>\n\n\n\n

      The Menu<\/h4>\n\n\n\n
      1. Click Appearance > Menus<\/strong>.<\/li>
      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><\/ol>\n\n\n\n
        1. In Menu Settings<\/strong> select Display location Primary<\/strong> and click Save Menu<\/strong>.<\/li><\/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><\/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><\/ol>\n\n\n\n

              The Header Layout<\/h4>\n\n\n\n
              1. Go to Appearance \u2192<\/strong><\/strong> Customizer \u2192<\/strong><\/strong> Layout \u2192<\/strong><\/strong> Header <\/strong>.<\/li>
              2. The theme includes 3 header layout options:
                – Logo centered between Navigation items <\/span>
                – Navigation below Logo
                – Logo left – Navigation right
                Each of the above layouts comes with additional options.<\/li>
              3. In order for the social icons to appear in the header, go to Appearance > Customize > Connect > Social Accounts<\/strong>, click Add new social account <\/strong>and fill in the social account info.<\/li><\/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
                • Add a new page or edit an existing one. <\/li>
                • Go to Document \u2192 Page Attributes<\/strong> and make sure you’ve selected the Default Template to see all Page Settings Options<\/li>
                • Check the following settings under Document \u2192<\/strong><\/strong> Page Settings<\/strong>:
                  • Hide Page Title<\/li>
                  • Remove Page Padding Top<\/li>
                  • Transparent Header<\/li>
                  • 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 black background, you can upload a white logo and select white Navigation color in the Customizer at Appearance \u2192 Customize \u2192 Layout \u2192 Header \u2192 Transparent Header<\/strong>.<\/li><\/ul><\/li><\/ul>\n\n\n\n
                    \"\"<\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"The Top BarThe LogoThe MenuThe Header Layout Transparent Header The Top Bar Go to Appearance \u2192 Customize \u2192 Layout \u2192 Top BarHere you can enter an address (and optionally link ...","protected":false},"author":2,"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\/amaya\/wp-json\/wp\/v2\/pages\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":5,"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/pages\/76\/revisions"}],"predecessor-version":[{"id":4169,"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/pages\/76\/revisions\/4169"}],"wp:attachment":[{"href":"https:\/\/docs.redsun.design\/amaya\/wp-json\/wp\/v2\/media?parent=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}