Dawn — Transparent Header and Mobile Menu Background Issue

Hi everyone, I’m customizing the Dawn theme and working on a transparent header setup.

Here’s the issue:
On mobile view, when I click to open the side menu (drawer), the menu background is white as expected, but the header remains transparent, which makes it hard to read on some backgrounds.

What I need:

  • When the mobile side menu is open, I want both the menu and the header to have a solid white background.
  • On desktop, I want to keep the header transparent as it is now.

I’d really appreciate any guidance or help to achieve this.

Thanks in advance!

1 Like

hey @vneznamova share the URLs of your website plz

https://carrara.studio/

Hi @vneznamova

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

Thank you so much! I have tried this code as you described, but unfortunately nothing changed. Do you have any ideas why? Maybe there is any other solution to this?

After pasting the first code, paste this one as well.


Please, check if I am doing it correctly? Still nothing changed:(

The code should be BEFORE , right?

You are pasting in a wrong way
there are 2 tags

Paste it one by one, first you need to paste code and leave one line, then you need to paste code

Hope you got my point!

Hi @vneznamova

This is the only way I can do it for now. Changing the cart icon color to black might be tricky and might need some changes in the Liquid code.

Check the code below.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Million thanks!! That helped!

As you said, the cart icon is not visible - any ideas how to make it visible on the white background?
Thanks in advance

Welcome, Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Try this one for the cart insert it into the or I will give you another code so it wont confuse you .


And Save.

Be sure when you replace it no missing sign or addional signs on it.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Thank you so much, that helped!

Did it work? Did you check the menu on a tablet screen?

And Would you mind hitting ‘like’ as well? Thanks!