{"id":2071,"date":"2021-05-20T18:07:19","date_gmt":"2021-05-20T15:07:19","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=2071"},"modified":"2026-09-04T13:07:19","modified_gmt":"2026-09-04T10:07:19","slug":"sticky-header","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-options\/sticky-header\/","title":{"rendered":"Sticky Header"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The <strong>Sticky Header<\/strong> keeps selected header rows visible at the top of the browser window while visitors scroll through the page. It is useful for keeping important navigation, account controls, contact information or WooCommerce elements within easy reach.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To configure it, open the <strong>Customiser \u2192 Header \u2192 Headers<\/strong> tab and enable the <strong>Sticky<\/strong> functionality for the header you are editing.<\/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-01-06-at-22.48.36.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Sticky Header in action.<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-group has-palette-color-3-color has-palette-color-5-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 Sticky Header functionality requires the <a href=\"https:\/\/wordpress.org\/plugins\/blocksy-companion\/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><strong>Blocksy Companion<\/strong><\/a> plugin to be installed and activated.<\/p>\n<\/div>\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-01-06-at-22.47.33.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Enabling the Sticky Header functionality.<\/figcaption><\/figure>\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=\"2000\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/05\/Screenshot-2026-09-04-at-13.05.29.png\" alt=\"\" class=\"wp-image-15160\" \/><\/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\">Sticky Rows<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can decide which parts of the desktop header remain visible when the sticky state is active. This lets you keep only the most important rows on screen instead of making the entire header sticky.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Available combinations include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>All Rows<\/strong><\/li>\n\n\n\n<li><strong>Main Row<\/strong><\/li>\n\n\n\n<li><strong>Top &amp; Main Rows<\/strong><\/li>\n\n\n\n<li><strong>Main &amp; Bottom Rows<\/strong><\/li>\n\n\n\n<li><strong>Top Row<\/strong><\/li>\n\n\n\n<li><strong>Bottom Row<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Sticky Transition<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The transition setting controls how the header enters and leaves its sticky state while visitors scroll.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Default<\/strong> &#8211; keeps the header fixed without an additional entrance animation.<\/li>\n\n\n\n<li><strong>Slide Down<\/strong> &#8211; slides the sticky header into view from the top of the screen.<\/li>\n\n\n\n<li><strong>Fade<\/strong> &#8211; reveals the sticky header using a fade transition.<\/li>\n\n\n\n<li><strong>Auto Show\/Hide<\/strong> &#8211; hides the header while scrolling down and brings it back when the visitor starts scrolling upwards.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Device Visibility<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Sticky Header can be enabled independently for the available responsive device views. This lets you keep the functionality active on desktop while disabling it on smaller screens, or use it across all supported devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sticky State Design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Header rows and supported elements can expose additional settings specifically for the sticky state. This lets you make the sticky version more compact or visually distinct from the regular header.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, header rows and the <strong>Logo<\/strong> element can be configured to shrink when the header becomes sticky. Other header elements can also provide separate design values for their sticky state where supported.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Video Resources<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Checking Out the Header&amp;apos;s Transparent &amp; Sticky States | Blocksy Customisation\" width=\"1290\" height=\"968\" src=\"https:\/\/www.youtube.com\/embed\/Wtpeuc9Qj9I?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">Exploring Blocksy&#8217;s Transparent and Sticky Header states.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The Sticky Header keeps selected header rows visible at the top of the browser window while visitors scroll through the page. It is useful for keeping important navigation, account controls, contact information or WooCommerce elements within easy reach. To configure it, open the Customiser \u2192 Header \u2192 Headers tab and enable the Sticky functionality for [&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-2071","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\/2071","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=2071"}],"version-history":[{"count":5,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2071\/revisions"}],"predecessor-version":[{"id":15162,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2071\/revisions\/15162"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=2071"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=2071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}