Transparent header for homepage only

[Hensolo]

Hi, 

Fairly new user here. 

I am trying to set up a transparent header on my Dawn theme home page, and a black background header on all other pages. I have managed to make my Header transparent using this custom css in the theme editor:

.header-wrapper {
background-color: rgba(255, 255, 255, 0) !important;
position: absolute;
width: 100%;
z-index: 999;
top: 0;
left: 0;
}
.header {
background: none !important;
margin-bottom: 0 !important;
}
main#MainContent {
margin-top: 0 !important;
}
.header.header--middle-left {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__inline-menu {
margin-left: auto !important;
}

 

 

But I would like the 'transparency' part of this custom CSS to only apply to the home page. Currently, these settings cause the other pages to have a transparent header which hurts visibility. The alignment is otherwise how I want it. 

Here is a link to my store preview: 
https://jbayf0dsajl5xi5y-56906317957.shopifypreview.com

Thanks for any help you can provide. 

Cheers, 
Matt

[GTLOfficial]

Please follow the steps as mentioned below:

- open your theme.liquid file.

- search for the </head> tag.

and copy and paste below CSS:

{% if template.name == "index" %} 
<style>
@media only screen and (min-width: 1025px) {
#main-navigation {
    background-color: transparent;
}
}
header-main, header {
    background-color: transparent !important;
}

header {
    position: absolute !important;
    width: 100%;
    border: none !important;
    top: 0 !important;
    z-index: 50 !important;
}
</style>
{% endif %}

Thanks

[Hensolo]

Thanks for your reply. In the end, Shopify support swooped in and solved this issue by adding specific 'custom liquid' in the theme editor 'custom liquid' section which I hadn't noticed before. It seems like it will apply custom liquid between pages which is exactly what I wanted. See screenshots that really helped.

  

Cheers.

[Dan-From-Ryviu · Accepted solution]

Hi @Hensolo 

You must code to theme.liquid file use this code to make it work on homepage only 

{% if template == 'index' %}
<style>
.header-wrapper {
background-color: rgba(255, 255, 255, 0) !important;
position: absolute;
width: 100%;
z-index: 999;
top: 0;
left: 0;
}
.header {
background: none !important;
margin-bottom: 0 !important;

</style>
{% endif %}

[namphan]

Hi @Hensolo,

Please change code:

{% if request.page_type == 'index' %}
<style>
.header-wrapper {
background-color: rgba(255, 255, 255, 0) !important;
position: absolute;
width: 100%;
z-index: 999;
top: 0;
left: 0;
}
.header {
background: none !important;
margin-bottom: 0 !important;
}
main#MainContent {
margin-top: 0 !important;
}
.header.header--middle-left {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__inline-menu {
margin-left: auto !important;
}
</style>
{% endif %}