Sticky announcement bar covers sticky header when on mobile

Shopify Discussion
1

When using the dawn theme, I opened the base.css and under .header.page-width I added:

padding-top: 40px;

Then, under /* section-announcement-bar */ I added:

position: fixed;

width: 100%;

left: 0;

top: 0;

That made my announcement bar sticky just like my header, and the announcement bar doesn’t cover the header on desktop.

But when I switch to mobile, the sticky announcement bar covers the sticky header. How do fix this? I searched and tried many solutions, but none have worked.

https://804692.myshopify.com/

solana

2

Hi @amelia-henry

I hope this solution will works. feel free to text me back if you have any question.
Please follow below steps

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag
@media (max-width:767px) { .header { padding-top: 70px!important; }
1 Like