How can I make my header and announcement bar sticky on scroll?

[Ivnvu]

Hi guys,

I'd like to make the header and announcement bar sticky on scroll on my page. I know this has been asked a lot but I can't seem to get it to work for my store (using Local theme). 

Does anyone have an input?

Store: https://gryningens.myshopify.com/

I'd like to achieve the same as on this site: https://www.mathem.se/ ,i.e,. the header follows along on scroll up and down.

Thank you so much

[PageFly-Henry · Accepted solution]

Hi @Ivnvu 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

div#shopify-section-sections--19397825560915__header {

    position: sticky;

    z-index: 999;

    top: 0;

}

div#shopify-section-sections--19397825560915__announcement { 

    position: sticky;

    z-index: 999;

    top: 41%;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[UmioNails]

can't find the file theme.css

shall i just edit the file theme.liquid under layout? and copy, paste the above codes?

[vincy66]

Hi Henry,

i tried your code, but it didn't work for my store(www.e-hemm.com), can you help me, please?

[ZenoPageBuilder]

Hello @Ivnvu 👋

Inside Shopify Admin, you can go to Edit theme code, open file theme.css (or theme.css.liquid) and add this code at the bottom

#shopify-section-sections--19397825560915__header {
    position: sticky;
    top: 0;
    z-index: 9999;
}

The header should be sticky like this

Hope that helps! 

[EdisonCLS]

Hi there,

Could you also help with our website: www.canadianliquorstore.ca

Regards,

Edison