Sticky Announcement Bar - DESKTOP ONLY

Solved
Highlighted
Excursionist
27 2 2

Hi all,

I have made my announcement bar sticky, but I want it to be sticky on the DESKTOP ONLY - as when it's sticky on mobile, it hides the search bar.

I used the below code:

 

#shopify-section-announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
#shopify-section-header {
padding-top: 38px;
  top: 30px;
}

 

 
Appreciate any help!
pass: renoware
0 Likes
Highlighted
Excursionist
27 2 2

This is an accepted solution.

Worked it out myself.. for anyone who needs it (Warehouse Theme):

#shopify-section-announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
 }
#shopify-section-header {
padding-top: 38px;
  top: 30px;
}

@media screen and (max-width: 600px) {
#shopify-section-announcement-bar {
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
#shopify-section-header {
padding-top: 0px;
  top: 0px;
}
0 Likes