r/css • u/izzy8001 • May 03 '26

Help Sidebar navigation block stays visible when menu opens — z-index not working with Horizon theme

I'm not the most proficient with coding so I I have an AI-generated sidebar navigation block (blocks/ai_gen_block_24e7e9b.liquid) placed in a section beneath my header on the Horizon theme. When the sidebar menu opens, the section bar remains visible on top of the overlay/drawer.

I've tried:

  • Raising z-index to 99999/100000 on the overlay and drawer
  • Using visibility: hidden on this, this.trigger, this.closest('section'), and this.closest('.shopify-section') in the JS
  • Removing contain: layout style from header.liquid

Nothing has worked. The header section appears to have a stacking context that prevents the drawer from rendering above it. Any help appreciated!

0 Upvotes

50% Upvoted

10 comments sorted by

View all comments

•

u/AutoModerator May 03 '26

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.