# How to fixed header on scroll in casper theme

**URL:** <https://forum.ghost.org/t/how-to-fixed-header-on-scroll-in-casper-theme/25101>\
**Category:** Developer help\
**Created:** [August 23, 2021, 5:47am UTC](https://forum.ghost.org/t/how-to-fixed-header-on-scroll-in-casper-theme/25101 "2021-08-23T05:47:48Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Achintpanchal1](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/achintpanchal1/32/13494_2.png) [@Achintpanchal1](https://forum.ghost.org/u/Achintpanchal1)\
**Post date:** [August 23, 2021, 5:47am UTC](https://forum.ghost.org/t/how-to-fixed-header-on-scroll-in-casper-theme/25101/1 "2021-08-23T05:47:49Z")

</div>

hey guys I want to fix my header in the Casper theme  
can u guide me on how to implement code using ghost injection

---

<div class="post-metadata">

**Author:** ![TeddyM](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/teddym/32/10984_2.png) [@TeddyM](https://forum.ghost.org/u/TeddyM)\
**Post date:** [October 5, 2021, 8:22am UTC](https://forum.ghost.org/t/how-to-fixed-header-on-scroll-in-casper-theme/25101/2 "2021-10-05T08:22:12Z")

</div>

Hi.

This is how I implemented stick nav on my site, [https://www.pyxofy.com](https://www.pyxofy.com).

```auto
/* Sticky Nav */
#gh-head {
	transition: all .4s ease-out;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;

```

You can put the code in a css file and host it on GitHub.  
Here’s the code you put in the header injection section.

`<link rel="stylesheet" href="your-github-url/custom.css">`

Hope this helps.