How to fixed header on scroll in casper theme

Developer help
1

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

2

Hi.

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

/* 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.

1 Like