Sticky banner (not header) on Refresh theme

Store Design
, ,

Topic summary

Goal: Make the announcement banner (not the header) sticky in the Shopify Refresh theme.

Solution provided: Add CSS to the stylesheet to fix the announcement bar at the top during scroll:

  • .shopify-section.shopify-section-group-header- group.announcement-bar-section { position: fixed; width: 100%; }

Notes:

  • “Sticky” means the banner remains fixed at the top while the page scrolls.
  • A screenshot was shared to show the visual result, and the code snippet is central to the solution.

Outcome: The original poster confirmed the CSS works perfectly and achieves the desired behavior.

Status: Resolved; no further issues or disagreements reported.

Summarized with AI on January 22. AI used: gpt-5.
1

Hi everyone! I was wondering if anyone knows how to have sticky banner, not header? I’ve seen how to make your header stick to the top of the screen when you scroll down but not for the banner. I only want the banner to stick. Is there a way to do this? Just in case, here is my store’s URL https://theprofitrocketautotrader.com/

Thank you all!!!

2

Hi,

if you want to make the top announcement banner sticky. Please add below css on your stylesheet.

.shopify-section.shopify-section-group-header-group.announcement-bar-section {
position: fixed;
width:100%
}

result

saurav9005_0-1690985761739.png
saurav9005_0-1690985761739.png1906×440 84.6 KB

1 Like
3

Hi Saurav9005, thank you so much for your help! It works perfectly :slightly_smiling_face: