Sticky Announcement Bar

WWJDWR
Excursionist
24 0 3

Hi, I am trying to make my announcement bar sticky with the header but I've tried everything and can't figure it out. The header is sticky but I want the announcement bar to also be sticky with it. Would greatly appreciate it if you know how to get this done. Site is shopworms.com


sticky ahh.jpg

Replies 2 (2)
Dan-From-Ryviu
Shopify Partner
5426 989 1007

Hi @WWJDWR 

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code before </head> tag

<style>
#shopify-section-sections--20163871736081__announcement-bar {
    position: sticky;
    top: 0px;
}
#shopify-section-sections--20163871736081__header { top: 42px; }
@media(max-width: 767px) {
#shopify-section-sections--20163871736081__header { top: 50px; }
}
</style>

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

WWJDWR
Excursionist
24 0 3

IMG_4125.png

worked for desktop, but not mobile. There is a space between the announcement bar and header.