{"id":9035,"date":"2025-05-09T06:00:00","date_gmt":"2025-05-09T06:00:00","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=9035"},"modified":"2025-05-09T13:31:01","modified_gmt":"2025-05-09T13:31:01","slug":"how-to-create-a-sticky-header","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/","title":{"rendered":"How to Create a Sticky Header"},"content":{"rendered":"\n
\n

The header is one of the integral parts of any site. Here, the core information about the company is displayed, including the logo, contact details, call-to-action buttons, and a site menu, which helps visitors navigate the website properly.<\/p>\n\n\n\n

Find it at the top of a page. With the help of the JetBlocks<\/em> plugin, you can make it sticky, and the header will remain visible as you scroll down the page.<\/p>\n\n\n\n

First, go to WordPress Dashboard > Crocoblock > Theme Templates > Header<\/em><\/strong> and open the necessary header in the Elementor page builder.<\/p>\n\n\n\n

\"header<\/a><\/div>\n\n\n\n

After the new window is opened, click on the section to open the Edit Section<\/strong> panel. Go to the Advanced<\/strong> tab, find the Jet<\/strong> <\/strong>Sticky<\/strong> section, and then enable the Sticky Section<\/strong> toggle. Check the JetSticky<\/em> fields settings:<\/p>\n\n\n\n

\"sticky<\/a><\/div>\n\n\n\n
    \n
  • Sticky Section<\/strong> \u2014 a toggle that keeps elements fixed at the top of the viewport during scrolling, maintaining visibility regardless of page position (deactivated by default);<\/li>\n\n\n\n
  • Stop Sticky at Parent End<\/strong> \u2014 a toggle that limits the sticky behavior to remain within its parent container boundaries (deactivated by default). When enabled, the sticky effect will stop at the end of the parent section or container. By default, the sticky effect stops at the next sticky element;<\/li>\n\n\n\n
  • Sticky Section Visibility<\/strong> \u2014 a feature that controls the responsive display of the sticky elements across different device types (available options: “Desktop,” “Tablet Portrait,” and “Mobile Portrait”);<\/li>\n\n\n\n
  • Z-index<\/strong> \u2014 a field that determines the stacking order of overlapping elements. This value defines what content will overlay the other. The higher the value, the more the layer is prioritized;<\/li>\n\n\n\n
  • Max Width (px)<\/strong> \u2014 a feature that constrains the horizontal dimensions of your section, allowing you to control the width of the section in pixels.<\/li>\n<\/ul>\n\n\n\n

    Style up the header with the help of the features in the Sticky Section<\/strong> Style <\/strong>section. The following options are available:<\/p>\n\n\n\n

      \n
    • Minimum Height<\/strong> \u2014 a feature that sets the vertical space the sticky section will occupy;<\/li>\n\n\n\n
    • Margin<\/strong> \u2014 a feature that controls the external spacing around the sticky section;<\/li>\n\n\n\n
    • Padding<\/strong> \u2014 a feature that defines the internal spacing within the sticky section;<\/li>\n\n\n\n
    • Background Type<\/strong> \u2014 a feature that determines how the sticky section background is rendered (two options are available: \u201cClassic\u201d and \u201cGradient\u201d);<\/li>\n\n\n\n
    • Box Shadow<\/strong> \u2014 a feature that adds a shadow through a set of customizable options (Color<\/strong>, Horizontal<\/strong>, Vertical<\/strong>, Blur<\/strong>, Spread<\/strong>, and Position<\/strong>);<\/li>\n\n\n\n
    • Transition Duration<\/strong> \u2014 a feature that controls how quickly the sticky section animates when changing states.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n

      That\u2019s all one needs to know to create a sticky header with the JetBlocks<\/em> plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"

      This tutorial will show how to create and adjust style settings in Elementor to make a sticky header unique with the help of the JetBlocks extension.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[472],"yoast_head":"\nHow to Create a Sticky Header \u2014 JetBlocks | Crocoblock<\/title>\n<meta name=\"description\" content=\"Study how to create a sticky header in Elementor with the help of the JetBlocks plugin within a few steps to improve your WordPress website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Sticky Header \u2014 JetBlocks | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Study how to create a sticky header in Elementor with the help of the JetBlocks plugin within a few steps to improve your WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-09T13:31:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/05\/header-template-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/\",\"name\":\"How to Create a Sticky Header \u2014 JetBlocks | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-05-09T06:00:00+00:00\",\"dateModified\":\"2025-05-09T13:31:01+00:00\",\"description\":\"Study how to create a sticky header in Elementor with the help of the JetBlocks plugin within a few steps to improve your WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Sticky Header\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Sticky Header \u2014 JetBlocks | Crocoblock","description":"Study how to create a sticky header in Elementor with the help of the JetBlocks plugin within a few steps to improve your WordPress website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Sticky Header \u2014 JetBlocks | Crocoblock","og_description":"Study how to create a sticky header in Elementor with the help of the JetBlocks plugin within a few steps to improve your WordPress website.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/","og_site_name":"Help Center","article_modified_time":"2025-05-09T13:31:01+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/05\/header-template-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/","name":"How to Create a Sticky Header \u2014 JetBlocks | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-05-09T06:00:00+00:00","dateModified":"2025-05-09T13:31:01+00:00","description":"Study how to create a sticky header in Elementor with the help of the JetBlocks plugin within a few steps to improve your WordPress website.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetblocks\/how-to-create-a-sticky-header\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Sticky Header"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/9035"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=9035"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=9035"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=9035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}