{"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":"2024-02-01T11:03:19","modified_gmt":"2024-02-01T09:03: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<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\"><\/video><figcaption class=\"wp-element-caption\">Sticky Header in action<\/figcaption><\/figure>\n\n\n\n<p>If your header needs to show important information to your visitors, that should be available all the times, no matter what the user is doing on the site, then you should turn on the <strong>Sticky Header<\/strong> feature.<\/p>\n\n\n\n<p>The <strong>Sticky Header<\/strong> feature lets your header stay fixed at the top of the screen. You can use it to show things such as Cart controls, important Contact information and so on.<\/p>\n\n\n\n<p>You can find the feature under the<strong> Customiser -&gt; Header -&gt; Global Header<\/strong> pane.<\/p>\n\n\n\n<p class=\"has-text-align-left is-style-info coblocks-alert-paragraph\"><strong>Important!<\/strong><br>The Sticky Header feature requires the <a href=\"https:\/\/wordpress.org\/plugins\/blocksy-companion\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Blocksy Companion<\/a> plugin to be installed, as it enables some of the advanced functionality for the Blocksy theme.<\/p>\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\"><\/video><figcaption class=\"wp-element-caption\">Turning on the Sticky Header<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Options Available<\/h2>\n\n\n\n<p>The Sticky position can be turned on for a specific combination of rows. This is useful in case you don&#8217;t want all the header rows to appear while the header sticks to the top.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>All Rows<\/li>\n\n\n\n<li>Main Row<\/li>\n\n\n\n<li>Top &amp; Main Rows<\/li>\n\n\n\n<li>Main &amp; Bottom Rows<\/li>\n\n\n\n<li>Only the Top Row<\/li>\n\n\n\n<li>Only the Bottom Row<\/li>\n<\/ul>\n\n\n\n<p>There&#8217;s also an option to choose a nice animation to play when the header transitions states. And of course, device controls, letting you enable the feature just for a specific set of devices.<\/p>\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&#039;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\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>If your header needs to show important information to your visitors, that should be available all the times, no matter what the user is doing on the site, then you should turn on the Sticky Header feature. The Sticky Header feature lets your header stay fixed at the top of the screen. You can use [&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":6}},"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":2,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2071\/revisions"}],"predecessor-version":[{"id":9418,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/2071\/revisions\/9418"}],"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}]}}