Sticky Annoucement Bar on Theme - Not sticky on mobile

[EastMeetsWestUS]

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

[shraddha_patel]

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

[EastMeetsWestUS]

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]

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

[EastMeetsWestUS]

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]

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;

}

}

[colb_32]

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;

}