{"id":175,"date":"2023-08-02T11:01:16","date_gmt":"2023-08-02T08:01:16","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=175"},"modified":"2026-10-29T16:12:42","modified_gmt":"2026-10-29T14:12:42","slug":"sticky-headers","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/sticky-headers\/","title":{"rendered":"How to Create a Sticky Header in Elementor Editor (v3 &amp; v4)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A sticky header keeps your site\u2019s navigation bar visible as visitors scroll down the page. The method to achieve this depends on your editor version:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>In Elementor Editor v4 (Atomic Editor):<\/strong> Wrap your header inside a parent container set to <strong>Static<\/strong> with an explicit minimum height, then set the inner header container to <strong>Position: Fixed<\/strong> (with Top: 0 and Z-index: 99).<\/li>\n\n\n\n<li><strong>In Elementor Editor v3:<\/strong> Select your header container, go to <strong>Advanced &gt; Motion Effects<\/strong>, and set <strong>Sticky<\/strong> to <strong>Top<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Follow the detailed step-by-step walkthrough below for your active editor version.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to Create a Sticky Header in Elementor Editor v4 (Atomic Editor)<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In Elementor Editor v4 (Atomic Editor), native CSS sticky (position: sticky) is container-bound, meaning the header stops sticking once its section scrolls out of view. To keep your header visible across the entire page, use a <strong>Fixed<\/strong> position.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Because fixed elements are lifted out of the normal page flow and take up zero vertical space, place your header inside an outer wrapper container that acts as an invisible spacer to prevent page content from sliding underneath it.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Create a parent wrapper container:<br><\/strong>Open your header template in the Elementor Editor and add a new container to the canvas. (This container acts as an invisible placeholder to keep your page content from jumping up).\n<ul class=\"wp-block-list\">\n<li>In the <strong>Edit Flexbox<\/strong> panel, select the <strong>Style<\/strong> tab and open <strong>Size<\/strong>.<\/li>\n\n\n\n<li>Set <strong>Width<\/strong> to 100% and <strong>Min height<\/strong> to match the height of your header (e.g., 80px).<\/li>\n\n\n\n<li>Open <strong>Position<\/strong> and ensure it is set to <strong>Static<\/strong>.<br><img fetchpriority=\"high\" decoding=\"async\" width=\"280\" height=\"859\" class=\"wp-image-171329\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-outer-container.png\" alt=\"Elementor Editor v4 Edit Flexbox panel showing Style Size settings with 100% Width, 80px Min height, and Position set to Static.\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-outer-container.png 298w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-outer-container-98x300.png 98w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Create the inner header container :<\/strong>\n<ul class=\"wp-block-list\">\n<li>Add a second container <strong>inside<\/strong> the outer wrapper container you just created. <em>(This will hold your site elements, such as your logo, navigation menu, and buttons).<\/em>&nbsp;<\/li>\n\n\n\n<li>Under <strong>Style &gt; Size<\/strong>, set <strong>Width<\/strong> to 100%.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Set the position to Fixed and configure stacking:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Select the inner header container.<\/li>\n\n\n\n<li>In the <strong>Edit Flexbox<\/strong> panel, go to <strong>Style &gt; Position<\/strong>.<\/li>\n\n\n\n<li>Set the <strong>Position<\/strong> dropdown to <strong>Fixed<\/strong>.<\/li>\n\n\n\n<li>In the <strong>Top<\/strong> offset field, enter 0 (always enter an explicit number, even 0, to prevent browser rendering jumps).<\/li>\n\n\n\n<li>Set the <strong>Z-index<\/strong> field to 99.<br><img decoding=\"async\" width=\"280\" height=\"884\" class=\"wp-image-171330\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-inner-container.png\" alt=\"Elementor Editor v4 Edit Flexbox panel showing Style Position set to Fixed with a Top offset of 0 and Z-index set to 99.\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-inner-container.png 298w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-inner-container-95x300.png 95w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to Create a Sticky Header in Elementor Editor v3<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In Elementor Editor v3, sticky behavior is built directly into the Motion Effects panel.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Select the Header Container:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Open your Header template and select your main header container or section &#8211; either by clicking its handle on the canvas or by selecting it from the <strong>Structure<\/strong> panel.<br><img decoding=\"async\" width=\"680\" height=\"81\" class=\"wp-image-171331\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/edit-container-handle.png\" alt=\"Selecting the main header container handle on the Elementor Editor canvas.\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/edit-container-handle.png 1365w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/edit-container-handle-300x36.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/edit-container-handle-1024x122.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/edit-container-handle-768x92.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Open Motion Effects:<\/strong>\n<ul class=\"wp-block-list\">\n<li>In the <strong>Edit Container<\/strong> panel, select the <strong>Advanced<\/strong> tab.<\/li>\n\n\n\n<li>Expand the <strong>Motion Effects<\/strong> section.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Enable Sticky:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Open the <strong>Sticky<\/strong> dropdown menu and select <strong>Top<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Choose Active Devices:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Under <strong>Sticky On<\/strong>, select the devices where the header should float (<strong>Desktop<\/strong>, <strong>Tablet Portrait<\/strong>, or <strong>Mobile Portrait<\/strong>).<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"683\" class=\"wp-image-171332\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/sticky-v3.png\" alt=\"Elementor Editor v3 Advanced Motion Effects panel showing Sticky set to Top with Desktop, Tablet, and Mobile devices enabled.\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/sticky-v3.png 320w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/sticky-v3-123x300.png 123w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><strong>Adjust Offsets (Optional):<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Offset:<\/strong> Set the distance (in pixels) between the header and the top of the viewport when stuck.<\/li>\n\n\n\n<li><strong>Effects Offset:<\/strong> Enter the number of pixels a visitor must scroll before sticky styles activate (useful for transparent-to-solid background color changes).<\/li>\n\n\n\n<li><strong>Stay In Column:<\/strong> Keep set to <strong>No<\/strong> for primary site headers so it does not stop scrolling when its section ends.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Troubleshooting Common Sticky Header Issues<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>What&#8217;s Happening<\/strong><\/td><td><strong>Root Cause<\/strong><\/td><td><strong>How to Fix It<\/strong><\/td><\/tr><tr><td><strong>Page content hides behind the header in v4<\/strong><\/td><td>Position: Fixed was applied to the outer container instead of the inner one<\/td><td>Keep the outer container set to <strong>Position: Static<\/strong> with a defined <strong>Min height<\/strong>. Apply <strong>Position: Fixed<\/strong> only to the inner header container.<\/td><\/tr><tr><td><strong>Header scrolls away immediately in v4<\/strong><\/td><td>In v4, Elementor uses native CSS <code>position: sticky<\/code>, which is container-bound by web standards (it only sticks within its own section).<\/td><td>This is normal CSS behavior. To keep a header visible across the entire page, use the <strong><code>Position: Fixed<\/code><\/strong> + outer spacer setup detailed above.<\/td><\/tr><tr><td><strong>Header floats behind page text or images<\/strong><\/td><td>Missing or insufficient Z-index<\/td><td>Set the header&#8217;s <strong>Z-index<\/strong> to 99 so it floats above standard page widgets.<\/td><\/tr><tr><td><strong>Sticky Motion Effects missing in v3<\/strong><\/td><td>Legacy section has &#8220;Stretch Section&#8221; turned on<\/td><td>If using legacy sections, disable <strong>Stretch Section<\/strong> in the Layout tab to reveal the Motion Effects sticky controls.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to use Elementor Pro&#8217;s Theme Builder to create Sticky Headers<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3e639c915f12afc0ffa73"],"page_builder":"","footnotes":""},"categories":[1466],"tags":[1389,1388,1387,1390,1398,1235],"class_list":["post-175","post","type-post","status-publish","format-standard","hentry","category-templates","tag-advanced","tag-agency","tag-essential","tag-expert","tag-legacy-essential","tag-pro"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create Sticky Headers Using Elementor Builder | Elementor<\/title>\n<meta name=\"description\" content=\"WordPress Sticky headers make your header or menu visible at all times. Learn how to create sticky headers using Elementor&#039;s theme builder.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/sticky-headers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Sticky Headers Using Elementor Builder | Elementor\" \/>\n<meta property=\"og:description\" content=\"WordPress Sticky headers make your header or menu visible at all times. Learn how to create sticky headers using Elementor&#039;s theme builder.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/sticky-headers\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-02T08:01:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-29T14:12:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-outer-container.png\" \/>\n\t<meta property=\"og:image:width\" content=\"298\" \/>\n\t<meta property=\"og:image:height\" content=\"914\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"asafr\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"asafr\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/\"},\"author\":{\"name\":\"asafr\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/5b0293d4a088f63c38be5dedda50c8da\"},\"headline\":\"How to Create a Sticky Header in Elementor Editor (v3 &amp; v4)\",\"datePublished\":\"2023-08-02T08:01:16+00:00\",\"dateModified\":\"2026-10-29T14:12:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/\"},\"wordCount\":678,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/v4-outer-container.png\",\"keywords\":[\"Advanced\",\"Agency\",\"Essential\",\"Expert\",\"Legacy Essential\",\"Pro\"],\"articleSection\":[\"Templates\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/\",\"name\":\"How to Create Sticky Headers Using Elementor Builder | Elementor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/v4-outer-container.png\",\"datePublished\":\"2023-08-02T08:01:16+00:00\",\"dateModified\":\"2026-10-29T14:12:42+00:00\",\"description\":\"WordPress Sticky headers make your header or menu visible at all times. Learn how to create sticky headers using Elementor's theme builder.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/v4-outer-container.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/v4-outer-container.png\",\"width\":298,\"height\":914,\"caption\":\"Elementor Editor v4 Edit Flexbox panel showing Style Size settings with 100% Width, 80px Min height, and Position set to Static.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/sticky-headers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design your Theme\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/design-your-theme\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Templates\",\"item\":\"https:\\\/\\\/elementor.com\\\/help\\\/design-your-theme\\\/templates\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Create a Sticky Header in Elementor Editor (v3 &amp; v4)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/help\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/help\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/help\\\/#\\\/schema\\\/person\\\/5b0293d4a088f63c38be5dedda50c8da\",\"name\":\"asafr\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g\",\"caption\":\"asafr\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Sticky Headers Using Elementor Builder | Elementor","description":"WordPress Sticky headers make your header or menu visible at all times. Learn how to create sticky headers using Elementor's theme builder.","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:\/\/elementor.com\/help\/sticky-headers\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Sticky Headers Using Elementor Builder | Elementor","og_description":"WordPress Sticky headers make your header or menu visible at all times. Learn how to create sticky headers using Elementor's theme builder.","og_url":"https:\/\/elementor.com\/help\/sticky-headers\/","og_site_name":"Help","article_published_time":"2023-08-02T08:01:16+00:00","article_modified_time":"2026-10-29T14:12:42+00:00","og_image":[{"width":298,"height":914,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-outer-container.png","type":"image\/png"}],"author":"asafr","twitter_card":"summary_large_image","twitter_misc":{"Written by":"asafr","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/sticky-headers\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/sticky-headers\/"},"author":{"name":"asafr","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/5b0293d4a088f63c38be5dedda50c8da"},"headline":"How to Create a Sticky Header in Elementor Editor (v3 &amp; v4)","datePublished":"2023-08-02T08:01:16+00:00","dateModified":"2026-10-29T14:12:42+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/sticky-headers\/"},"wordCount":678,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/sticky-headers\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-outer-container.png","keywords":["Advanced","Agency","Essential","Expert","Legacy Essential","Pro"],"articleSection":["Templates"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/sticky-headers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/sticky-headers\/","url":"https:\/\/elementor.com\/help\/sticky-headers\/","name":"How to Create Sticky Headers Using Elementor Builder | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/sticky-headers\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/sticky-headers\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-outer-container.png","datePublished":"2023-08-02T08:01:16+00:00","dateModified":"2026-10-29T14:12:42+00:00","description":"WordPress Sticky headers make your header or menu visible at all times. Learn how to create sticky headers using Elementor's theme builder.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/sticky-headers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/sticky-headers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/sticky-headers\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-outer-container.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/v4-outer-container.png","width":298,"height":914,"caption":"Elementor Editor v4 Edit Flexbox panel showing Style Size settings with 100% Width, 80px Min height, and Position set to Static."},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/sticky-headers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Design your Theme","item":"https:\/\/elementor.com\/help\/design-your-theme\/"},{"@type":"ListItem","position":3,"name":"Templates","item":"https:\/\/elementor.com\/help\/design-your-theme\/templates\/"},{"@type":"ListItem","position":4,"name":"How to Create a Sticky Header in Elementor Editor (v3 &amp; v4)"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/5b0293d4a088f63c38be5dedda50c8da","name":"asafr","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g","caption":"asafr"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=175"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/175\/revisions"}],"predecessor-version":[{"id":171336,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/175\/revisions\/171336"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}