How can I make my symmetry theme announcement bar sticky?

Technical Q&A

Topic summary

A user needed help making the announcement bar sticky in the Symmetry theme.

Initial Problem:

  • Added CSS to make the bar sticky, but scrolling caused other page content to cover it
  • The bar wasn’t staying in the foreground

Attempted Solutions:

  • First attempt created a sticky bar but caused it to cover the header instead
  • Required lowering the header position (screenshot was provided)

Working Solution:
The issue was resolved by applying specific CSS to the announcement bar:

#shopify-section-announcement-bar {
  position: sticky !important;
  top: 0;
  z-index: 999;
}

Key Fix: Setting z-index: 999 ensured the announcement bar stayed above other elements while maintaining proper positioning. The solution worked perfectly without requiring header adjustments.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

I’ve added this code to the bottom of my CSS. It works to make the announcement bar sticky, but when I scroll the announcement bar gets covered by any other content I have on the page. How can I make sure that the announcement bar stays sticky in the foreground? This is in the Symmetry theme. Thanks!

#shopify-section-announcement-bar{

position: sticky !important;
top: 0;

}

2

Please share the store URL

3

xxx

4

This solution also works to create the sticky bar, but then the announcement bar covers the header. We would need to lower the header (screenshot attached)

#shopify-section-announcement-bar{

  z-index: 4;
    position: fixed !important;
    width: 100% !important;
}
#shopify-section-header {
    z-index: 3;
    margin-top: 0px !important;
}
}
5

Please use this css

#shopify-section-announcement-bar {
position: sticky !important;
top: 0;
z-index: 999;
}

Thanks

1 Like
6

Thank you! That worked perfectly