Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an accepted solution.
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;
}
This is an accepted solution.
Managed to work it out.. see below code:
Thanks for your help!!
This is an accepted solution.
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;
}
}
This is an accepted solution.
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?
This is an accepted solution.
Managed to work it out.. see below code:
Thanks for your help!!
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 🙂
This is an accepted solution.
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;
}
}
Thank you!!!
Hello, I am with the theme motion, the announcement bar does not stay fixed neither on mobile nor on computer
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.
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.
@lucherio007you need share the page url, then I can check and give you the code to fix.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024