{"id":15252,"date":"2025-02-11T17:45:28","date_gmt":"2025-02-11T23:45:28","guid":{"rendered":"https:\/\/getflywheel.com\/?p=15252"},"modified":"2025-02-11T17:45:36","modified_gmt":"2025-02-11T23:45:36","slug":"create-sticky-website-header-how-to","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/","title":{"rendered":"How to Create a Sticky Header"},"content":{"rendered":"\n<p>Website headers that stay in place when a user scrolls through a page have become an increasingly popular design element in recent years. <\/p>\n\n\n\n<p>Known as &#8220;<a href=\"https:\/\/www.attrac.io\/blog\/ecommerce-sticky-header-examples\" target=\"_blank\" rel=\"noreferrer noopener\">sticky headers<\/a>,&#8221; these website headers allow users to easily access navigation without the need to scroll back up each time they want to choose a different page or option. <\/p>\n\n\n\n<p>Sticky header functionality enhances the user experience by ensuring navigation remains readily available, helping users navigate your site more efficiently. Sticky headers are particularly beneficial for websites with extensive content, as they help users find what they\u2019re looking for without losing their place on a page. <\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">What makes a website header sticky?<\/h2>\n\n\n\n<p>Sticky headers are created using <a href=\"https:\/\/www.w3schools.com\/css\/css_positioning.asp\" target=\"_blank\" rel=\"noreferrer noopener\">fixed positioning<\/a>, which allows the header to remain in place as the user scrolls through the page. The main component of a sticky header is positioning the element relative to the viewport (the browser window). Unlike other elements that may move when the page is scrolled, an element with fixed positioning stays in a constant position on the screen.<\/p>\n\n\n\n<p>Here&#8217;s how it works:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Fixed positioning<\/strong>: This <a href=\"https:\/\/www.geeksforgeeks.org\/css-positioning-elements\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS property<\/a> positions an element relative to the viewport, which means it remains fixed in one spot on the screen regardless of how much the user scrolls. The element does not move because its position is defined in relation to the browser window itself.<\/li>\n\n\n\n<li><strong>Viewport relation<\/strong>: The viewport is the <a href=\"https:\/\/stackoverflow.com\/questions\/33770549\/viewport-vs-window-vs-document\" target=\"_blank\" rel=\"noreferrer noopener\">visible area of the browser window<\/a>. Since this area remains consistent as the user scrolls, any element positioned relative to the viewport will also remain consistent in its position. This is why the fixed element, such as a sticky header, stays visible and accessible.<\/li>\n\n\n\n<li><strong>CSS implementation<\/strong>: To implement fixed positioning, you use the <code>position: fixed;<\/code> CSS property. This ensures that the element is taken out of the normal document flow and placed relative to the viewport. Additional properties like <code>top, right, bottom<\/code>, and <code>left<\/code> can be used to define the exact position of the element within the viewport.<\/li>\n<\/ol>\n\n\n\n<p>For example, consider the following CSS code snippet for a sticky header:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.navbar-fixed-top {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 999;\n}<\/code><\/pre>\n\n\n\n<p>Here&#8217;s a breakdown of what each property does: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position: fixed;<\/strong>: This property ensures the header remains fixed relative to the viewport.<\/li>\n\n\n\n<li><strong>Top: 0;<\/strong>: Positions the header at the very top of the viewport.<\/li>\n\n\n\n<li><strong>Right: 0; and Left: 0;<\/strong>: Ensures the header spans the full width of the viewport.<\/li>\n\n\n\n<li><strong>Z-index: 999;<\/strong>: Ensures the header stays on top of other elements, preventing it from being overlapped.<\/li>\n<\/ul>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Z-index consideration<\/strong>: The z-index property is crucial for sticky headers to ensure they remain on top of other elements on the page. By assigning a high z-index value, you make sure the header is not obscured by other content.<\/li>\n<\/ol>\n\n\n\n<p>By combining these elements, you create a sticky header that remains accessible and enhances the user experience by providing constant navigation options. This approach is particularly useful for improving usability on websites with long pages or extensive content.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/12\/Twitter_No_Copy_1024x512.png\" alt=\"A screenshot of Local\" class=\"wp-image-30431\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Note: Don&#8217;t try this on your live site!<\/h3>\n\n\n\n<p>Remember: To prevent potential issues, avoid making changes directly on your live site. Instead, use a free local development app, such as <a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Local<\/a>, to set up a test environment where you can safely follow this tutorial.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-alpha-channel-opacity\" \/>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Creating a sticky header with CSS<\/strong><\/h2>\n\n\n\n<p>Now that you understand the basics and benefits of using a sticky header, here&#8217;s how to create one for your WordPress site(s).<\/p>\n\n\n\n<p>To get started, you\u2019ll first need to define a CSS class that sets the header&#8217;s position to fixed. This class will ensure the navigation bar stays at the top of the page, no matter how much you scroll. Here&#8217;s an example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.navbar-fixed-top {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 999;\n}<\/code><\/pre>\n\n\n\n<p>The <code>.navbar-fixed-top<\/code> class is added to the navigation element, setting its position to fixed and ensuring it occupies the full width of the page. Here&#8217;s a breakdown of what each property does:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Position: fixed;<\/strong> This property ensures the header remains fixed relative to the viewport.<\/li>\n\n\n\n<li><strong>Top: 0;<\/strong> Positions the header at the very top of the viewport.<\/li>\n\n\n\n<li><strong>Right: 0;<\/strong> and <strong>Left: 0;<\/strong> Ensures the header spans the full width of the viewport.<\/li>\n\n\n\n<li><strong>Z-index: 999;<\/strong> ensures the header stays on top of other elements, preventing it from being overlapped. The <code>z-index<\/code> property is crucial for sticky headers, as it ensures they remain on top of other elements on the page. By assigning a high <code>z-index<\/code> value, you ensure the header is not obscured by other content.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Adjusting the page body<\/strong><\/h3>\n\n\n\n<p>Since a fixed header will cover part of the content at the top of a page, you may want to add the following padding to the top of the body that pushes the content down:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n  padding-top: 75px;\n}<\/code><\/pre>\n\n\n\n<p>Using this code snippet, you can adjust the padding based on the height of your fixed header.<\/p>\n\n\n\n<p>While the above provides the essential CSS for adding a sticky header to your site, the next sections will explore additional enhancements, such as making your sticky header responsive and squishy, and exploring alternative methods like CSS <code>position: sticky;<\/code> for creating sticky headers.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-alpha-channel-opacity\" \/>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Making your sticky header responsive<\/strong><\/h2>\n\n\n\n<p>In today\u2019s multi-device world, it\u2019s crucial that your website adapts to different screen sizes and devices, ensuring an optimal viewing experience for everyone. For a sticky header, being responsive means adjusting the header\u2019s size and appearance based on a user&#8217;s device and scrolling behavior.<\/p>\n\n\n\n<p>A responsive sticky header often becomes thinner as the user scrolls, a feature sometimes referred to as a &#8220;squishy&#8221; header. This provides more space to view the main content and is particularly useful on smaller screens, where maximizing visible content is essential.<\/p>\n\n\n\n<p>Achieving a responsive sticky header requires a combination of CSS and JavaScript. By setting initial styles with CSS and using JavaScript to adjust these styles based on scroll events, you can create a header that works seamlessly across all devices. Below, we&#8217;ll walk through the different steps and code snippets needed to implement these features.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/02\/sticky-example.png\" alt=\"sticky header css positioning example. create a sticky header\" class=\"wp-image-26222\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>CSS for a squishy navigation<\/strong><\/h3>\n\n\n\n<p>To make the navigation bar shrink when the user scrolls, you can start by defining the initial and shrunken states in your CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.navbar-fixed-top {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  background: #f6f6f6;\n  z-index: 999;\n  height: 90px;\n  overflow: hidden;\n  transition: height 0.3s;\n}\n\n.navbar-fixed-top.cbp-af-header-shrink {\n  height: 75px;\n}<\/code><\/pre>\n\n\n\n<p>The <code>.navbar-fixed-top<\/code> class sets the initial fixed position and dimensions of the header. The <code>.cbp-af-header-shrink<\/code> class specifies the reduced height for the header when the user scrolls, making the header &#8220;squishy.&#8221;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>JavaScript for dynamic class addition<\/strong><\/h3>\n\n\n\n<p>Next, use JavaScript to dynamically add the <code>.cbp-af-header-shrink<\/code> class based on the user&#8217;s scroll position:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function scrollPage() {\n  var sy = window.scrollY;\n  if (sy &gt;= changeHeaderOn) {\n    header.classList.add('cbp-af-header-shrink');\n  } else {\n    header.classList.remove('cbp-af-header-shrink');\n  }\n  didScroll = false;\n}<\/code><\/pre>\n\n\n\n<p>This script checks the scroll position and adds or removes the <code>.cbp-af-header-shrink<\/code> class accordingly. As a result, the header&#8217;s size adjusts dynamically based on the user&#8217;s scrolling behavior.<\/p>\n\n\n\n<p>By combining these CSS and JavaScript techniques, you can create a responsive sticky header that enhances user experience and adapts to various screen sizes and devices. Implementing these features ensures your website remains user-friendly and accessible, regardless of how it is accessed.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-alpha-channel-opacity\" \/>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Using CSS sticky positioning<\/strong><\/h2>\n\n\n\n<p>While making your sticky header responsive is essential for a seamless user experience across different devices, it&#8217;s also beneficial to explore using CSS sticky positioning.&nbsp;<\/p>\n\n\n\n<p>The <code>position: sticky;<\/code> property combines the characteristics of relative and fixed positioning, allowing an element to be treated as relative until it hits a specified point, at which it becomes fixed. This approach can simplify the implementation of a sticky header and offer better performance in some scenarios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example of sticky positioning<\/strong><\/h3>\n\n\n\n<p>To use position: sticky;, you can apply the following CSS to your navigation element:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.navbar-fixed-top {\n  position: -webkit-sticky; \/* For Safari *\/\n  position: sticky;\n  top: 0;\n}<\/code><\/pre>\n\n\n\n<p>This code ensures that the header sticks to the top of the viewport when scrolling. The element remains relative until the top of the viewport reaches the top of the header, at which point it becomes fixed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Handling overflow and browser support<\/strong><\/h3>\n\n\n\n<p>While <code>position: sticky;<\/code> is useful, it has some limitations regarding overflow and browser support. Here are a few things to keep in mind:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Overflow<\/strong>: Avoid certain types of overflow on a parent element with a sticky-positioned element, such as <code>overflow: auto;, overflow: scroll;<\/code>, or <code>overflow: hidden;<\/code>, as these can interfere with the sticky behavior.<\/li>\n\n\n\n<li><strong>Browser Support<\/strong>: Not all browsers fully support <code>position: sticky;<\/code>. To ensure your design works across different browsers, you can use the <code>@supports<\/code> rule to detect if the current browser supports sticky positioning:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>@supports (position: sticky) {\n  .header {\n    position: -webkit-sticky; \/* For Safari *\/\n    position: sticky;\n    top: 0;\n  }\n}<\/code><\/pre>\n\n\n\n<p>If browser support is a concern, consider using fixed positioning as an alternative. Fixed positioning is widely supported across all modern browsers, making it a reliable fallback option.<\/p>\n\n\n\n<p>Using <code>position: sticky;<\/code> can simplify the implementation of a sticky header by combining relative and fixed positioning. <\/p>\n\n\n\n<p>However, it&#8217;s essential to consider its limitations with overflow and browser support. By using the <code>@supports<\/code> rule and providing fallbacks like fixed positioning, you can ensure your sticky header works effectively across all devices and browsers. Exploring both responsive design and CSS sticky positioning will help you create a robust and user-friendly navigation experience on your website.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-css-opacity\" \/>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Create a sticky header for your WordPress sites!<\/strong><\/h2>\n\n\n\n<p>Creating a sticky header for your WordPress site is relatively simple with CSS and JavaScript. By following the steps outlined above, you can ensure your navigation remains accessible and user-friendly. And remember\u2014test your changes in a local environment before applying them to your live site!<\/p>\n\n\n\n<p>Create a sticky website header for your <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Engine-hosted sites<\/a> on Local! Learn more&nbsp;and download it for free <a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>screenshot of web page with source code revealed on the lower third\t\t\t<\/p>\n","protected":false},"author":1,"featured_media":139968,"template":"","resource-topic":[1396,901],"resource-role":[1397,903],"resource-type":[916],"class_list":["post-15252","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Sticky Header: The Ultimate Guide<\/title>\n<meta name=\"description\" content=\"Ready to create a sticky header for your website? We&#039;re sharing how you can create one for your WordPress website!\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\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\" \/>\n<meta property=\"og:description\" content=\"What&#039;s a &quot;sticky&quot; website header? Here&#039;s how designers use this element and how to create sticky elements in WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-11T23:45:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/10\/Shutterstock_586958768.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create a Sticky Header\" \/>\n<meta name=\"twitter:description\" content=\"What&#039;s a &quot;sticky&quot; website header? Here&#039;s how designers use this element and how to create sticky elements in WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/10\/Shutterstock_586958768.jpg\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/\",\"name\":\"How to Create a Sticky Header: The Ultimate Guide\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2025-02-11T23:45:28+00:00\",\"dateModified\":\"2025-02-11T23:45:36+00:00\",\"description\":\"Ready to create a sticky header for your website? We're sharing how you can create one for your WordPress website!\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Sticky Header\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Sticky Header: The Ultimate Guide","description":"Ready to create a sticky header for your website? We're sharing how you can create one for your WordPress website!","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Create a Sticky Header","og_description":"What's a \"sticky\" website header? Here's how designers use this element and how to create sticky elements in WordPress.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2025-02-11T23:45:36+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/10\/Shutterstock_586958768.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_title":"How to Create a Sticky Header","twitter_description":"What's a \"sticky\" website header? Here's how designers use this element and how to create sticky elements in WordPress.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/10\/Shutterstock_586958768.jpg","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/","name":"How to Create a Sticky Header: The Ultimate Guide","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2025-02-11T23:45:28+00:00","dateModified":"2025-02-11T23:45:36+00:00","description":"Ready to create a sticky header for your website? We're sharing how you can create one for your WordPress website!","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/create-sticky-website-header-how-to\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Create a Sticky Header"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2018\/10\/Shutterstock_586958768-1.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Marketer","topic":"<strong>Topics:<\/strong> Design, WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/15252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/139968"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=15252"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=15252"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=15252"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=15252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}