How to make the header transparent ONLY on landing page? RIDE 15.3

[TeleTubi48]

I already have this code that makes the header transparent, but I only want it for the homepage. The rest of the pages dont look that good with the transparent header.

<style>
.shopify-section-group-header-group .header-wrapper {
background: transparent !important; 
}
{% if template == 'index' %}
#MainContent { margin-top: -135px !important; }
{% endif %}

</style>

[thescriptflow]

Here is the update code.

<style>
{% if template == 'index' %}
#MainContent { margin-top: -135px !important; }
.shopify-section-group-header-group .header-wrapper {
background: transparent !important; 
}
{% endif %}

</style>

There was typo that you don't enclose it in the index condition. Now it will work on home page just.

[birlapunya]

Birla Punya is an amazing new residential complex in Sangamwadi, Pune. The project is 5.7 acres in size overall. The property provides ultra-luxurious living quarters with its 3 and 4 BHK units. A 4 BHK iconic apartment's floor area starts at 2800 square feet, while a 3 BHK apartment's floor area starts at 2200 square feet. The introduction of Birla Punya is planned for 2024. In 2028, following four years of development, possession will begin. The RERA procedure is currently underway for this project, and approval is anticipated soon.

[TeleTubi48]

This one doesn't work for me. I inverted the code order and it worked. Still, thank you!

[TeleTubi48 · Accepted solution]

Solved it myself actually. For whoever might concern, this is the code:  (pasted in theme.liquid)


<style>
{% if template == 'index' %}
.shopify-section-group-header-group .header-wrapper {
background: transparent !important; 
}
#MainContent { margin-top: -135px !important; }
{% endif %}

</style>