{"id":2069,"date":"2021-05-20T18:06:23","date_gmt":"2021-05-20T15:06:23","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=2069"},"modified":"2026-09-04T13:09:41","modified_gmt":"2026-09-04T10:09:41","slug":"transparent-header","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-options\/transparent-header\/","title":{"rendered":"Transparent Header"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The <strong>Transparent Header<\/strong> lets the content at the top of the page extend underneath the header instead of beginning below it. This is particularly useful for hero sections with background images, videos or strong visual designs where you want the header to blend directly into the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To configure it, open <strong>Customiser \u2192 Header \u2192 Headers<\/strong>, select the header you want to edit, and enable its <strong>Transparency<\/strong> functionality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quick Look<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/Screen-Recording-2022-06-09-at-14.52.20.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">The Transparent Header in action.<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"is-style-info coblocks-alert-paragraph wp-block-paragraph\"><strong>Blocksy Companion required<\/strong><br>The Transparent Header functionality requires the Blocksy Companion plugin to be installed and activated.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/Screen-Recording-2022-06-09-at-14.54.20.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Enabling the Transparency functionality.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once transparency is enabled, the header is overlaid on top of the content below it rather than occupying its own separate area. The underlying hero section therefore becomes visible behind the header.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This works especially well with Blocksy&#8217;s full-width Page Title layouts and other large hero sections that provide enough visual space behind the header.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"1080\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/Screenshot-2026-09-04-at-13.09.02.png\" alt=\"\" class=\"wp-image-15164\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Display Conditions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Transparent Header does not need to be active everywhere. Use its <strong>Display Conditions<\/strong> to choose exactly where the transparent state should be enabled.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Conditions can include or exclude specific areas such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pages and posts.<\/li>\n\n\n\n<li>Post types and archives.<\/li>\n\n\n\n<li>WooCommerce products and shop areas.<\/li>\n\n\n\n<li>Categories, tags and other taxonomies.<\/li>\n\n\n\n<li>User roles and login states.<\/li>\n\n\n\n<li>Other supported conditions provided by Blocksy&#8217;s Conditional Module.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For a complete overview of the available targeting options, see the <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/modules\/conditions-module\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Conditional Module documentation<\/strong><\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Transparent State Design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Supported header rows and elements can provide separate design values for the transparent state. This lets you adapt the header specifically for the background that appears underneath it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, the <strong>Logo<\/strong> element can use a dedicated image while the transparent state is active, making it possible to switch between light and dark logo variants automatically.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Other supported elements can also expose transparent-state Color and design controls, allowing navigation, icons and other header content to remain clearly visible against the hero background.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"is-style-info coblocks-alert-paragraph wp-block-paragraph\"><strong>Keep enough contrast<\/strong><br>Because the header sits directly over the page content, make sure its logo, navigation and other elements remain easy to read against the underlying background. Transparent Headers generally work best above a large hero section with predictable imagery or Color.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Transparent Header lets the content at the top of the page extend underneath the header instead of beginning below it. This is particularly useful for hero sections with background images, videos or strong visual designs where you want the header to blend directly into the page. To configure it, open Customiser \u2192 Header \u2192 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[123],"class_list":["post-2069","documentation","type-documentation","status-publish","hentry","doc_categories-header-options"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=2069"}],"version-history":[{"count":3,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2069\/revisions"}],"predecessor-version":[{"id":15165,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2069\/revisions\/15165"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=2069"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=2069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}