{"id":162,"date":"2022-11-18T14:07:59","date_gmt":"2022-11-18T14:07:59","guid":{"rendered":"https:\/\/loftocean.com\/doc\/patiotime\/?post_type=ptkb&p=162"},"modified":"2023-09-08T03:56:10","modified_gmt":"2023-09-08T03:56:10","slug":"how-to-make-site-header-to-be-overlapped","status":"publish","type":"ptkb","link":"https:\/\/loftocean.com\/doc\/cozystay\/ptkb\/how-to-make-site-header-to-be-overlapped\/","title":{"rendered":"How to make site header transparent and overlap"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n
\t
\n\t Tutorial Video\t <\/h6> <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In this video, we will show you how to make a site header transparent and overlap.<\/p>

  1. Please navigate to the Admin Bar<\/strong> at the top of the page, and find \u201cEdit with Elementor<\/strong>\u201d.<\/li>
  2. Hover over it to show a drop-down list. Find the site header, its name will vary depending on the demo you imported, for example, it may be \u201cMountain Chalet Header\u201d, \u201cIsland Resort Header\u201d, \u201cApartment Header\u201d, etc., the key word is \u201cHeader<\/strong>\u201c.<\/li>
  3. Click on it to open the Elementor editor.<\/li>
  4. If the site header has a background color and you want to remove it, please navigate to each “Section”, and click “Style” tab in the left sidebar, find “Background Color” and click “Clear”.<\/li>
  5. Now you may not be able to see any elements in the editor because the text and background are all white. In the upper right corner of the editor you can find Color Mode Simulator<\/strong>, click \u201cDARK<\/strong>\u201d and the editor background will turn black so you can see what\u2019s on the page. The Color Mode Simulator only works in the editor, it will not affect the page in the front-end.<\/li>
  6. Click the “Gear<\/strong>” icon in the left sidebar, and then you will find “CozyStay Site Header Settings<\/strong>“, enable overlap header.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n
    \t
    \n\t Tutorial (Text Version)\t <\/h6> <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    In this video, we will show you how to make a site header transparent and overlap.<\/p>

    1. When editing a site header, click the\u00a0Gear<\/strong> icon in the left sidebar, and then you will find “CozyStay Site Header Settings”<\/span><\/strong>, enable “Overlap Header<\/strong><\/em>“.\"\"<\/a><\/li>
    2. If you want the header to have a transparent background, just don’t add a background color to sections and columns. If the site header already has a background color, please navigate to each “Section” and go to the “Style<\/strong>” tab, find “Background Color” and clear it.\"\"<\/a><\/li>
    3. If the site header is to be displayed on a dark background (for example, the hero section below), you may want the text to be white. Select each\u00a0Column<\/span><\/strong>, then navigate to “Style”<\/strong> Tab<\/span> > “[CozyStay] Color Scheme”<\/span><\/strong>, set to “Dark”<\/span><\/strong>, the color of the elements in that column will change to white.\"\"<\/a><\/li>
    4. If you site’s default color scheme is set to\u00a0Light<\/strong>, now you probably won’t be able to see any elements in the editor. In the upper right corner of the editor you can find\u00a0Color Mode Simulator<\/span><\/strong>, click\u00a0DARK<\/span><\/strong>\u00a0and the editor background will turn black so you can see what’s on the page. The\u00a0Color Mode Simulator<\/span>\u00a0only works in the editor, it will not affect the page in the front-end.\"\"<\/a><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"menu_order":0,"template":"","ptkb_category":[3,11],"class_list":["post-162","ptkb","type-ptkb","status-publish","hentry","ptkb_category-how-tos-faqs","ptkb_category-site-header"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb\/162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/types\/ptkb"}],"version-history":[{"count":3,"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb\/162\/revisions"}],"predecessor-version":[{"id":1224,"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb\/162\/revisions\/1224"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/media?parent=162"}],"wp:term":[{"taxonomy":"ptkb_category","embeddable":true,"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb_category?post=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}