Hi, can someone please tell me the code to insert, to make my announcement bar sticky on both mobile and desktop?
URL https://renovation-warehouse.myshopify.com/
Password renoware
Thanks!
follow this path:
Themes => edit code => asset => theme.scss.liquid
and try to add this code to bottom of the file theme.css.liquid
#shopify-section-announcement-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
#shopify-section-header {
top: 39px;
}
Awesome that worked - but it needs padding for both mobile and desktop - see screenshot.
What/where should I add this?
Managed to work it out.. see below code:
Thanks for your help!!
#shopify-section-announcement-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
#shopify-section-header {
padding-top: 38px;
top: 30px;
}
Hiya, are you able to tell me how I can remove this rule from mobile devices? I don’t want it to be sticky on mobile, because it hides the search bar 
Hi @goldtreedesign
To fix the problem on mobile like you want.
You can replace the old code by this:
@media(min-width: 650px){
#shopify-section-announcement-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
#shopify-section-header {
padding-top: 38px;
top: 30px;
}
}
1 Like
Thank you!!!
Hello, I am with the theme motion, the announcement bar does not stay fixed neither on mobile nor on computer
Hi Michael, I have the prestige theme and I would like to have a sticky announcement bar too. I’ve tried to do what you said but I came up like this (see the picture): the background color isn’t working anymore. Please, can you help me fixing this? Thank you.
@lucherio007 you need share the page url, then I can check and give you the code to fix.
Hi!
I applied this code and it works great in the desktop version, but in the mobile version it hides.
Thank you in advance for your valuable help.