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/
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.
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
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