All things Shopify and commerce
This is the code I have in the theme.css (theme is w a r e h o u s e)
@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 makes the announcement bar sticky on desktop but not on mobile. How can I make the bar sticky on both mobile and desktop
Hello @EastMeetsWestUS ,
Try to use below css instead [Remove media query]
#shopify-section-announcement-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
#shopify-section-header {
padding-top: 38px;
top: 30px;
}
If still facing the same problem, please send me url to check in depth.
Thank you
Hi, this code works in terms of making the announcement bar sticky on BOTH mobile and desktop. However on mobile the announcement bar overlaps a bit - see attached
you will need to add some top margin on mobile to the header to prevent the overlap
With this code, there seems to be no separation coding for mobile or desktop. If I change the top margin, won't this effect how it looks on desktop?
so you would need a media query for mobile only:
#shopify-section-announcement-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
#shopify-section-header {
padding-top: 38px;
top: 30px;
}
@media (max-width:650px){
.header-selector(grab the selector for the header element){
margin-top:(value to eliminate the overlap)px;
}
}
I'm having the same issue, I've tried a variety of codes, the code below works perfectly for desktop, but not mobile.
I've attempted to include media codes, but no luck. I've tried all the codes above, but no luck. Please help 🙂
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025