How to increase Z-index of Mobile hamburger menu - can’t target menu drawer to increase it

[sawez]

Hi everyone,

I’m having an issue with the mobile hamburger menu in my shopify (dawn-based) theme.

The menu opens, but it sits behind other elements. When I inspect it, the menu seems to have a z-index of 3.

I can’t lower the z-index of the elements on top because:

• The buy button on the product page uses z-index: 3

• Can’t lower it because the widget underneath will overlap the buy button

• Other sections on my store also use z-index: 2

So the only solution is to increase the z-index of the mobile menu, but I can’t seem to target it correctly.

I tried this (in base.css), but it doesn’t work:

header-drawer {
  z-index: 9999;
}

#menu-drawer {
  z-index: 10000 !important;
}

I also attached a screenshot from my store in mobile view showing the issue.

Does anyone know the correct selector / parent element to increase the mobile menu’s z-index in a Dawn-based theme? You would help me immensely if you know cause I spent a lot of time trying to find the code for it.

Thanks a lot!

My store: https://www.sawez.be/

store pass: abc

[sawez]

so i also tried these but no luck :

@media (max-width: 820px) {

.menu-drawer__utility-links {

z-index: 9999 !important; /\* YESSSSS ((nvm got too happy werkt ni als ik sticky button hoger dan 2 z index zet)) dus die buy sticky button op mobile ging over de beneden zijde van de hamburger menu on mobile, ik zocht hele tijd menu drawer enzo maar beneden heb je zo die login dus de code is utility-links, nu kan ik de buy sticky button z index verhogen van 2 naar 10 zodat de chatbubble nog steeds eronder blijft gehided op productpagina \*/

}

.menu-drawer__navigation {

z-index: 9999 !important; /\* Dus met deze code ikben aant proberen maar vind het nog steeds ni deze werkt ook ni\*/

}

}

[sawez]

tried also: @media (max-width: 820px) {

.menu-drawer__inner-container,

.menu-drawer__navigation-container,

.menu-drawer__utility-links,

.menu-drawer__localization,

.header-localization {

z-index: 10000 !important;

}

}

[sawez]

I have tried these as well and dont work, can someone please help me find the correct code I have spend hours trying to get this right:

@media (max-width: 820px) {
.menu-drawer-container {
position: fixed !important; /* ensures z-index applies /
z-index: 10000 !important; / higher than sticky buy button & chat */
}
}

[sawez]

I FOUND ITT this code was in BASE.CSS :

/* section-header */

.section-header.shopify-section-group-header-group {

z-index: 3;

}

I changed the z index from 3 to 300 and now it hides it!!! :

/* section-header */

.section-header.shopify-section-group-header-group {

z-index: 300;

}

[sawez]

No nevermind unfortunately..

tried fixing my site’s menu by adjusting the header. While the menu issue is resolved, raising the .section-header globally seems to have caused a new conflict with my chat widget.

From what I understand:

• The original diagnosis about the menu issue was correct

• Raising .section-header globally is not the right final fix

Can someone guide me on how to fix the menu without creating stacking or positioning conflicts with other elements like the chat widget?

[tim_1]

You can approach it from the other side(s):

1. You can make z-index higher only for open menu
2. You can hide “offending” elements when menu is open, like this:

body:has(.menu-drawer-container[open]) .sticky-buy-section {
  display: none;
}

Before:

After:

[sawez]

Hey Tim thanks a lot for helping. As you know I already found the code to the way I actually wanted to do yesterday but couldnt do it so I resorted to doing it this way. I’m happy I can now do it the intended way which is the widget above the buy button, only on product page. Again thanks for willing to help! You are what makes this community very good.