How can I make a custom announcement bar sticky on all devices?

Hey guys, new to Shopify, I have a custom announcement bar that I need it to be sticky when scrolled on all devices. I have watch videos and have not been able to resolve this, I have a copy of the site I am working on here:

https://crazy-bull-america.myshopify.com/a/pf_preview?id=33c8df1c-83d8-4a5e-a4b7-af44bdcef9d1

Can show me what code I need and where I need to add it please

@oscprofessional I have seen you comment on this before

Hi @Aj-Aj , there is no content in your announcement bar right now, anyway, you should add sticky position to your announcement bar, something like:

.shopify-section-announcement-bar{
   height:50px;
   position:sticky;
}

Also, since your header has sticky position too, you should add:

.sticky-header .section-header{
top:50px; //height of your announcement bar
}

Hope this helps!

Hey @MarinaPetrovic the announcement bar I have is custom not one by shopify, when I applied the code the main navbar covers and hide the announcement bar when scrolled, so for the moment the code did not acheieve what I wanted. Do you have another suggestion? if possible, would you be so kind to screenshot something you applied via inspect element of it working?

Hi @Aj-Aj , add these properties to you announcement bar - red bar (take a look at the inspect from screenshot), also don’t forget to include

top: 50px;

to your header. :slightly_smiling_face:

If you find my answers helpful, please mark resolved or like.