Sticky Annoucement Bar on Theme - Not sticky on mobile

EastMeetsWestUS
New Member
4 0 0

 

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

 

Replies 6 (6)

shraddha_patel
Shopify Partner
153 24 23

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

Need more help with theme customization and store development ? You can Reach me here
Or Text me
EastMeetsWestUS
New Member
4 0 0

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

logangelzer
Shopify Partner
20 5 9

you will need to add some top margin on mobile to the header to prevent the overlap

Logan Gelzer
Founder & CEO
Logo Media
logan@logo.media
EastMeetsWestUS
New Member
4 0 0

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?

logangelzer
Shopify Partner
20 5 9

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;

}

}

Logan Gelzer
Founder & CEO
Logo Media
logan@logo.media
colb_32
New Member
6 0 0

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 🙂 

 

.announcement-bar-section {
    position: sticky;
    top: 0;
    z-index: 20;
}
.section-header {
    position: sticky;
    top: 37px;
    width: 100%;
    z-index: 20;
}
 
.shopify-section-header-sticky{
    box-shadow:0px 5px 5px rgba(0,0,0,.5);
}
  @media screen and (max-width: 425px){
 .is-moved-by-drawer {
    top: 0px !important;
}
.main-content{
margin-top: 0px !important;
}