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. 
If you find my answers helpful, please mark resolved or like.
