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

Store Design
, , ,

Topic summary

Goal: make the Shopify store’s header and announcement bar “sticky” (remain visible while scrolling) in the Local theme.

Proposed solutions:

  • Add CSS in Online Store > Theme > Edit code > theme.css (or theme.css.liquid):
    • For header: position: sticky; top: 0; high z-index (e.g., 999–9999). Example selector used: #shopify-section-sections–19397825560915__header.
    • For announcement bar: position: sticky; top: 41%; z-index: 999 using selector #shopify-section-sections–19397825560915__announcement.
  • A screenshot was shared showing the expected sticky result for the header. CSS snippets are central to the solution. “position: sticky” is a CSS property that keeps an element fixed once it reaches a specified offset (top) during scroll.

Latest developments and issues:

  • One user cannot find theme.css and asked if editing layout/theme.liquid is appropriate (unanswered).
  • Another user reported the provided code did not work on their store and requested further help.
  • A separate user asked for help applying this to a different site.

Status: No confirmed resolution from the original poster; solutions provided, but implementation issues remain open.

Summarized with AI on December 12. AI used: gpt-5.
1

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

2

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

3

Hello @Ivnvu :waving_hand:

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

Screenshot 2023-09-22 at 17.46.49.png
Screenshot 2023-09-22 at 17.46.49.png1062×221 57.2 KB

Hope that helps!

4

Hi there,

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

Regards,

Edison

5

can’t find the file theme.css

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

6

Hi Henry,

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