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
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 {
position: absolute !important;
max-width: 100% !important;
width: 100% !important;
}
</style>RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @meowieowie
Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
{% if template == 'index' %}
<style>
.section-header .header-wrapper {
background: transparent;
transition: background .25s ease-in-out; }
#MainContent { margin-top: -81px; }
html .section-header.scrolled-past-header .header-wrapper { background: #fff; }
@media (max-width: 749px) {
html #MainContent { margin-top: -73px; }
}
</style>
{% endif %}
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 </body> tag
<style>
header {
position: absolute !important;
max-width: 100% !important;
width: 100% !important;
}
</style>RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @meowieowie
Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
{% if template == 'index' %}
<style>
.section-header .header-wrapper {
background: transparent;
transition: background .25s ease-in-out; }
#MainContent { margin-top: -81px; }
html .section-header.scrolled-past-header .header-wrapper { background: #fff; }
@media (max-width: 749px) {
html #MainContent { margin-top: -73px; }
}
</style>
{% endif %}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.
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 
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.
Hi,
Can you help me change the number background color displayed on the cart to #A3B9D2 and the "X" in the menu tab on mobile to black because it is currently white, in the transparent header. Thank you
Hey @PuppyJoyful
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
{% if template == 'index' %}
<style>
.section-header .header-wrapper {
border: 0 !important;
}
</style>
{% endif %}RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Is there any way to delete the old favicon, I don't know where to delete it.
As in the picture, the favicon above is the one I want to delete, and the favicon below is the one I'm currently using, but sometimes it still shows the old favicon (above)
Community Blog Articles
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025
Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025