Banner covers drawer cart / menu

Topic summary

Announcement bar overlays the cart/menu drawer on mobile and desktop in a Shopify store.

Key issue:

  • The announcement bar’s CSS z-index is set very high, causing it to sit above the drawer.
  • z-index: a CSS property controlling the stacking order; higher values appear on top.

Proposed fixes:

  • Lower the announcement bar’s z-index (e.g., to 10) so the drawer can overlay it.
  • Alternatively, raise the drawer’s z-index via CSS (e.g., .your-drawer-class { z-index: 1000; }) in theme.css or custom.css.

Evidence:

  • Attached images show the high z-index on the announcement bar and the corrected layering after adjustment. Visuals are central to understanding the fix.

Considerations:

  • Ensure the drawer’s z-index is higher than the announcement bar’s.
  • Adjust values as needed to fit the theme’s existing stacking context.

Status:

  • No confirmed resolution reported by the original poster.
  • Action items: edit CSS to either lower the announcement bar’s z-index or increase the drawer’s z-index; test on both mobile and desktop.
Summarized with AI on December 28. AI used: gpt-5.

Hi,

for some reason the announcement bar I have covers the drawer on mobile and desktop. Can anyone help me make sure that the drawer is on top of it once it goes out ?
Thank you!!
https://ynco-ny.com/

2 Likes

Hi @Daniel19901

It seems like you add a very high z-index in your bar announcement.

The cart drawer bust have the higher z-index.

Make it 10 so it not covering the drawer.

And save the changes.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like

Hello Daniel19901,

In the e CSS file, such as theme.css or custom.css):
CSS

.your-drawer-class {
z-index: 1000; /* Adjust the value as needed */
}

1 Like