Transparent Header Dawn Theme V15.2.0

I am trying to create a transparent header like so:

Can someone please advise how to do this in the most current Dawn theme (15.2.0)?

Thank you!

Hey @meowieowie

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

Thanks Moeed! It’s https://kovicarriers.myshopify.com

Hey @meowieowie

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 tag


RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

Thanks Moeed! I realized that I actually would like it to also become solid when scrolling. Are you able to adjust the code to accommodate?

Hi @meowieowie

Please add this code to theme.liquid file, after in Online Store > Themes > Edit code

{% if template == 'index' %}

{% endif %}

Perfect, thank you!

You are very welcome!

Can you help me make the Header transparent, and when scrolling down it is white background with my 2nd logo (different color), hope you can help me, i tried many times but failed. Thank you

Please drop your store URL here

url store: puppyjoyful.com, pls help me :((

The first logo is white, in the transparent part of the header, and when scrolling down I change want the blue logo (my other color logo) to be on a white background.

URL Store: https://puppyjoyful.com/

Please add this code to theme.liquid file, after in Online Store > Themes > Edit code

{% if template == 'index' %}

{% endif %}

I did it and it worked but how to make menu + cart and search bar white when in transparent background, pls help me. Thank you
Screenshot 2024-11-03 063601.png

Please update the code.

{% if template == 'index' %}

{% endif %}

Wowww. Everything worked fine thank you so much for helping me, I am so happy I got it to work what I wanted. Thank you so much :heart:

Hi bro, I just discovered this, after completing your instructions, there is an error happening on mobile devices, when in transparent state of Header, when opening menu tab, all text changes to white, Please help me. Thank you.

Bạn update lại code nhé

{% if template == 'index' %}

{% endif %}

Code updated

{% if template == 'index' %}

{% endif %}