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

and copy and paste below CSS:

{% if template.name == "index" %} 

{% endif %}

Thanks

[Dan-From-Ryviu]

Hi @Hensolo

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

{% if template == 'index' %}

{% endif %}

[namphan]

Hi @Hensolo ,

Please change code:

{% if request.page_type == 'index' %}

{% endif %}

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