**Theme:** Narrative
**Version(s) successfully tested on:** 5.4.0
**Recommended design time:** 10 minutes
----
## What you want
![](https://screenshot.click/22-18-srdxl-edu5t.mp4
----
## What you do
**Step 1:**
Open **Sections > header.liquid**
Find parent div of `<header class="site-header__wrapper" role="banner">`
And add the following code to the div's class:
```liquid
{% if section.settings.enable_sticky %} site-header__sticky{% endif %}
```
**Step 2:**
Then the following to the end of the `{% schema %}` settings:
```js
{
"type": "header",
"content": {
"en": "Sticky header"
}
},
{
"type": "checkbox",
"id": "enable_sticky",
"label": {
"en": "Enable sticky header"
},
"default": true
}
```
**Step 3:**
Add the following to the very top of the `header.liquid` file
```liquid
{% if section.settings.enable_sticky %}
<style>
.content-for-layout {
padding-top:70px;
}
</style>
{% endif %}
```
**Step 4:**
Open **Assets > custom.js** and add the following to the bottom
(this finds the _promiseHeaderSlideIn function and overrides it in the minified theme.js file!)
```js
const sections = window.theme.sections;
const headerExtension = {
init: function() {
this.on('section_load', this._promiseHeaderSlideIn.bind(this));
},
_promiseHeaderSlideIn: function() {
//override original function
}
};
sections.extend('header-section', headerExtension);
```
**Step 5:**
Open **Assets > theme.scss.liquid** and add the following to the bottom of theme.scss.liquid
*Note that your merchant may not want the Opacity*
.site-header__sticky {
position: fixed !important;
top: 0 !important;
width: 100% !important;
opacity: 0.75;
}
----
**Additional notes:**
**Alternative keywords:**