# Transparent header problem

**URL:** <https://community.shopify.com/t/transparent-header-problem/629607>\
**Category:** Store Design\
**Tags:** design\
**Created:** [May 28, 2026, 5:51am UTC](https://community.shopify.com/t/transparent-header-problem/629607 "2026-05-28T05:51:26Z")\
**Posts on this page:** 8\
**Page:** 1

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

<div class="post-metadata">

**Author:** ![k3k3k3](https://avatars.discourse-cdn.com/v4/letter/k/ba9def/32.png) [@k3k3k3](https://community.shopify.com/u/k3k3k3)\
**Post date:** [May 28, 2026, 5:51am UTC](https://community.shopify.com/t/transparent-header-problem/629607/1 "2026-05-28T05:51:27Z")

</div>

![IMG_2747](https://canada1.discourse-cdn.com/shopifyforum/original/4X/0/8/7/087e1635cdb400bb773ae2b3a4fb2a4599229629.jpeg)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](http://kwa-e.com)

---

<div class="post-metadata">

**Author:** ![k3k3k3](https://avatars.discourse-cdn.com/v4/letter/k/ba9def/32.png) [@k3k3k3](https://community.shopify.com/u/k3k3k3)\
**Post date:** [May 28, 2026, 5:52am UTC](https://community.shopify.com/t/transparent-header-problem/629607/2 "2026-05-28T05:52:53Z")

</div>

Grateful for any help, thank you!

---

<div class="post-metadata">

**Author:** ![Moeed](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/moeed/32/407464_2.png) [@Moeed](https://community.shopify.com/u/Moeed)\
**Post date:** [May 28, 2026, 7:16am UTC](https://community.shopify.com/t/transparent-header-problem/629607/3 "2026-05-28T07:16:37Z")

</div>

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

```auto
<style>
.header-wrapper:has(.menu-opening) {
    background: white !important;
}
</style>

```

**RESULT:**

 ![image](https://canada1.discourse-cdn.com/shopifyforum/original/4X/9/f/8/9f85c6b6fd6ad34fa0f130d99e192f7a33cbd490.png)

* * *

###### 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

---

<div class="post-metadata">

**Author:** ![k3k3k3](https://avatars.discourse-cdn.com/v4/letter/k/ba9def/32.png) [@k3k3k3](https://community.shopify.com/u/k3k3k3)\
**Post date:** [May 28, 2026, 8:45am UTC](https://community.shopify.com/t/transparent-header-problem/629607/5 "2026-05-28T08:45:10Z")

</div>

![IMG_2753](https://canada1.discourse-cdn.com/shopifyforum/original/4X/6/d/e/6dee5fff6b39f8bd4c2acf7f09a92d55125c223c.jpeg)

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?

---

<div class="post-metadata">

**Author:** ![Moeed](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/moeed/32/407464_2.png) [@Moeed](https://community.shopify.com/u/Moeed)\
**Post date:** [May 28, 2026, 8:56am UTC](https://community.shopify.com/t/transparent-header-problem/629607/6 "2026-05-28T08:56:24Z")

</div>

Hey @k3k3k3

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

```auto
<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](https://canada1.discourse-cdn.com/shopifyforum/original/4X/0/a/7/0a700b7d3d6c51d047d549d5cc2f02992a3a0ea2.png)

* * *

###### 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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/b/b/7bbfe07c91e3f502d9c876612b0b445245662ef9.png) [@system](https://community.shopify.com/u/system)\
**Post date:** [May 28, 2026, 12:17pm UTC](https://community.shopify.com/t/transparent-header-problem/629607/7 "2026-05-28T12:17:09Z")

</div>



---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/b/b/7bbfe07c91e3f502d9c876612b0b445245662ef9.png) [@system](https://community.shopify.com/u/system)\
**Post date:** [May 29, 2026, 8:26pm UTC](https://community.shopify.com/t/transparent-header-problem/629607/8 "2026-05-29T20:26:48Z")

</div>



---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/b/b/7bbfe07c91e3f502d9c876612b0b445245662ef9.png) [@system](https://community.shopify.com/u/system)\
**Post date:** [May 31, 2026, 8:27pm UTC](https://community.shopify.com/t/transparent-header-problem/629607/9 "2026-05-31T20:27:46Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.