Transparent header problem

Store Design

AI-generated summary

A store owner customized a Shopify theme to make the header transparent, but the mobile dropdown menu was not displaying fully in white. A suggested fix was to add CSS in theme.liquid above the closing </body> tag so the header wrapper turns white when the menu is open: .header-wrapper:has(.menu-opening) { background: white !important; }.

After applying the fix, the header issue appeared resolved, but a new layout problem appeared: the lower part of the price/localization area in the mobile menu was positioned incorrectly.

The latest recommendation is to remove the previous CSS and replace it with an expanded style block. It keeps the white header-on-menu-open behavior and also adjusts the mobile menu localization selector width, navigation container height, and utility links padding.

The discussion appears to have a proposed solution, but final confirmation from the store owner after applying the updated code is still pending.

1

IMG_2747
IMG_27471206×2622 136 KB
I just found a code online for making the header transparent, but I found that my original dropdown menu isn’t showing up completely in white. Is there a problem with my code, or do I need to add something extra to it?

My website: kwa-e.com

2

Grateful for any help, thank you!

3

Hey @k3k3k3

Follow these 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 </ body> tag
<style>
.header-wrapper:has(.menu-opening) {
    background: white !important;
}
</style>

RESULT:

image
image346×618 6.79 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

5

IMG_2753
IMG_27531206×2622 84.5 KB

I think the header problem is fixed now, but another problem has appeared: the bottom part of the price section seems to be in the wrong position. How can I fix it?

6

Hey @k3k3k3

Remove the previous code and add this updated code mentioned below.

<style>
.header-wrapper:has(.menu-opening) {
    background: white !important;
}
.menu-drawer__localization .localization-form__select {
    width: 100% !important;
}
.menu-drawer__navigation-container {
    height: 85% !important;
}
.menu-drawer__utility-links {
    padding-left: 25px !important;
}
</style>

RESULT:

image
image346×749 10.5 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed