Only have transparent header affect the homepage

Store Design
, ,
1

URL: https://rstui88ih53vlnp0-17240367.shopifypreview.com

Password: testcode123

@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;
}

I have created a transparent header using the code above in theme.liquid, but I just noticed its affecting every single page on the website, how do I only enable it for the landing page and that’s it?

2

@emekayode 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 %}
3

Hi @emekayode

Please place below code into your theme.liquid file it will only works on homepage/landing page.

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

{% endif %}

Thanks

4

I actually just figured it out just before you posted this solution but thanks a lot