Transparent header problem

Store Design
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