How can I create a sticky header on a custom Debut theme without using js?

Store Design
1

Hi there,

Is there a way to make the Debut theme header (menu) sticky without js? My website (www.christmassongsandcarols.com) has a sticky header but uses js with css to make it work. However, this is slowing down our site load time due to the offset after the page loads.

Any help would be great!

Thanks

1 Like
2

@TessaAdamson

yes please try this code

https://codepen.io/yuchehsieh/pen/ExaWvbe

3

Thanks! Will give it a try and let you know how I get on :slightly_smiling_face:

1 Like
4

@TessaAdamson

yes sure take your time

5

When i set the header to sticky nothing happens but when I set it to fixed it works as expected, but the hero section is behind the header. You can preview my test theme here: https://rh0wijc22h7y3o51-5335056418.shopifypreview.com

6

@TessaAdamson

yes your have missing top value

7

I still cannot get it to work. When I set it to fixed the hero section hides behind the header and when I set it to sticky it everything is displayed correctly but does not scroll. PReview link is here: https://fjawdjnzjyhmy64r-5335056418.shopifypreview.com and I am using the class shopify-section-header

8

@TessaAdamson

KetanKumar_0-1630982811442.png
KetanKumar_0-1630982811442.png1920×1080 208 KB

sorry