How can I make my symmetry theme announcement bar sticky?

Technical Q&A
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