{"id":5341,"date":"2020-11-06T12:00:28","date_gmt":"2020-11-06T19:00:28","guid":{"rendered":"https:\/\/kadence-theme.com\/?post_type=knowledgebase&#038;p=967"},"modified":"2025-10-14T01:24:30","modified_gmt":"2025-10-14T01:24:30","password":"","slug":"how-to-use-a-transparent-header","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/how-to-use-a-transparent-header\/","title":{"rendered":"How to Use a Transparent Header"},"content":{"rendered":"\n<p>To set up a transparent header with just a few clicks, follow the steps below.<\/p>\n\n\n\n<p>Go to the WordPress Customizer, either at <strong>Appearance &gt; Customize<\/strong> from the wp-admin menu or by clicking Customize in the wp-admin bar on the front end of your WordPress site.<\/p>\n\n\n\n<p>Next, go to the Customizer <em>Header<\/em> section.<\/p>\n\n\n\n<p>Scroll down and click on <em>Transparent Header<\/em>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69dfd481c3f49&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"488\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.19.59-AM.jpg-1024x488.jpg\" alt=\"\" class=\"wp-image-10948\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.19.59-AM.jpg-1024x488.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.19.59-AM.jpg-300x143.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.19.59-AM.jpg-768x366.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.19.59-AM.jpg-1536x733.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.19.59-AM.jpg-2048x977.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.19.59-AM.jpg-360x172.jpg 360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Turn on the &#8220;<strong>Enable Transparent Header?<\/strong>&#8221; setting.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69dfd481c43dd&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"485\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.18.13-AM-1024x485.jpg\" alt=\"\" class=\"wp-image-10950\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.18.13-AM-1024x485.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.18.13-AM-300x142.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.18.13-AM-768x364.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.18.13-AM-1536x728.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.18.13-AM-2048x971.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Chase-the-horizon-2025-02-06-at-8.18.13-AM-360x171.jpg 360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>This will enable the transparent header for both desktop and mobile by default.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5341_647d43-df, .wp-block-kadence-advancedheading.kt-adv-heading5341_647d43-df[data-kb-block=\"kb-adv-heading5341_647d43-df\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5341_647d43-df mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5341_647d43-df[data-kb-block=\"kb-adv-heading5341_647d43-df\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5341_647d43-df img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5341_647d43-df[data-kb-block=\"kb-adv-heading5341_647d43-df\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p id=\"transparentlogo\" class=\"kt-adv-heading5341_647d43-df wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5341_647d43-df\">Tip: <strong>If the logo is not changing on your website<\/strong>. This is most likely because the transparent header is enabled on the page. The transparent header allows you to set a different logo for the transparent header. You also need to change that to make sure that the correct logo is displayed on the page using the transparent header:<\/p>\n\n\n<style>.kb-image5341_8eb7d7-88 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image5341_8eb7d7-88 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1031\" height=\"913\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Teejay-2025-03-17-at-10.05.35-AM.jpg\" alt=\"\" class=\"kb-img wp-image-11405\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Teejay-2025-03-17-at-10.05.35-AM.jpg 1031w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Teejay-2025-03-17-at-10.05.35-AM-300x266.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Teejay-2025-03-17-at-10.05.35-AM-1024x907.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Teejay-2025-03-17-at-10.05.35-AM-768x680.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/11\/Customize-Teejay-2025-03-17-at-10.05.35-AM-360x319.jpg 360w\" sizes=\"auto, (max-width: 1031px) 100vw, 1031px\" \/><\/figure>\n\n\n\n<p>In the <em>DESIGN tab,<\/em> you can set the various colors when the header is made transparent.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-theme\/wp-content\/uploads\/sites\/10\/2020\/09\/kadence-transparent-header-design.png\" alt=\"Kadence Transparent Header Design Settings\" class=\"wp-image-255\" style=\"width:222px;height:643px\" \/><\/figure><\/div>\n\n\n<p>Click on <strong>Publish<\/strong> when you are done.<\/p>\n\n\n\n<p><em>Note: The global Transparent Header setting acts as the <strong>default<\/strong> for all pages and posts. However, you can <strong>override<\/strong> this on individual pages or posts. When set, the <strong>individual page or post setting takes precedence<\/strong> over the global option.<\/em><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading5341_8f6de6-0f, .wp-block-kadence-advancedheading.kt-adv-heading5341_8f6de6-0f[data-kb-block=\"kb-adv-heading5341_8f6de6-0f\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading5341_8f6de6-0f mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading5341_8f6de6-0f[data-kb-block=\"kb-adv-heading5341_8f6de6-0f\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading5341_8f6de6-0f img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading5341_8f6de6-0f[data-kb-block=\"kb-adv-heading5341_8f6de6-0f\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"transparent-page-settings\" class=\"kt-adv-heading5341_8f6de6-0f wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading5341_8f6de6-0f\">How to enable\/disable transparent header on individual pages and posts?<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Edit the page<\/li>\n\n\n\n<li>Click the <strong>Page Settings<\/strong> Icon<\/li>\n\n\n\n<li>Select the <strong>Transparent Header<\/strong> settings for the page<\/li>\n\n\n\n<li>Click the <strong>save<\/strong> button<\/li>\n<\/ol>\n\n\n<style>.kb-image5341_b8065e-f3 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image5341_b8065e-f3 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"852\" height=\"568\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Edit-Page-Home-\u2039-teejay-\u2014-WordPress-\ud83d\udd0a-2025-07-21-at-3.31.40-PM-edited.jpg\" alt=\"\" class=\"kb-img wp-image-13889\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Edit-Page-Home-\u2039-teejay-\u2014-WordPress-\ud83d\udd0a-2025-07-21-at-3.31.40-PM-edited.jpg 852w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Edit-Page-Home-\u2039-teejay-\u2014-WordPress-\ud83d\udd0a-2025-07-21-at-3.31.40-PM-edited-300x200.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Edit-Page-Home-\u2039-teejay-\u2014-WordPress-\ud83d\udd0a-2025-07-21-at-3.31.40-PM-edited-768x512.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Edit-Page-Home-\u2039-teejay-\u2014-WordPress-\ud83d\udd0a-2025-07-21-at-3.31.40-PM-edited-360x240.jpg 360w\" sizes=\"auto, (max-width: 852px) 100vw, 852px\" \/><\/figure>\n\n\n\n<p><em>This allows you to fine-tune the header appearance on a per-page basis, regardless of the global settings.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To set up a transparent header with just a few clicks, follow the steps below. Go to the WordPress Customizer, either at Appearance &gt; Customize from the wp-admin menu or by clicking Customize in the wp-admin bar on the front end of your WordPress site. Next, go to the Customizer Header section. Scroll down and&#8230;<\/p>\n","protected":false},"author":1265,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[407],"doc_tag":[],"knowledge_base":[6],"class_list":["post-5341","docs","type-docs","status-publish","hentry","doc_category-theme-header","knowledge_base-kadence-theme"],"year_month":"2026-04","word_count":248,"total_views":"10641","reactions":{"happy":"3","normal":"1","sad":"0"},"author_info":{"display_name":"Ben Ritner","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/britner\/"},"doc_category_info":[{"term_name":"Header","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/theme-header\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Theme","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/","term_slug":"kadence-theme"}],"knowledge_base_slug":["kadence-theme"],"taxonomy_info":{"doc_category":[{"value":407,"label":"Header"}],"knowledge_base":[{"value":6,"label":"Kadence Theme"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/1265"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=5341"}],"version-history":[{"count":9,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5341\/revisions"}],"predecessor-version":[{"id":15585,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5341\/revisions\/15585"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=5341"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=5341"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=5341"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=5341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}