HTML CSS to Remove Header Image ONLY From the Home Page

Solved
GoodKarmaCo
Excursionist
18 0 3

Hey everyone, 

Searched through the community and couldn't find an answer so hoping someone can help me modify the HTML code for this issue.

I added the following code to my theme.scss.liquid:

.site-header {
background-image: url("(image name).jpg");
background-size: 100%;
}

Everything works fine. Except, I want this image to appear on every page of my site EXCEPT the home page (I have a Slideshow section on the home page acting as a header). Can anyone help me edit the HTML so that it displays the header on every page except the home page? Thank you!

0 Likes
Ninthony
Shopify Partner
1715 243 663

What kind of file did you add that into? If it's a css.liquid file you can check the template name with liquid:

{% unless template.name == 'index' %}
.site-header {
background-image: url("(image name).jpg");
background-size: 100%;
}
{% endunless  %}

 

Alternatively if you take that out of a css file, you can perform that action at the opening <body> tag in theme.liquid and wrap it in style tags:

<style>
{% unless template.name == 'index' %}
.site-header {
background-image: url("(image name).jpg");
background-size: 100%;
}
{% endunless  %}
</style>



If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
GoodKarmaCo
Excursionist
18 0 3

Thanks for the response Ninthony! I'm not sure exactly how to check the template name? I just added the previous html code into theme.scss.liquid. The header shows up on every page; but it overlaps with the homepage. You can see what the issue is on my site here:

Website: wewantgoodkarma@gmail.com

Password: Wewantgoodkarma

I tried the html you provided on both theme.scss.liquid (in assets) as well as theme.liquid (in layout). But that didn't seem to work. Alternatively, if I could somehow add the Slideshow image thats on the home page to every page, that could work as well. Thanks in advance

0 Likes
GoodKarmaCo
Excursionist
18 0 3

Hi Ninthony, you sent me the following code to add to my theme.liquid in my layout code section. I tried it again and realized I actually need the opposite lol.

This code is only displaying the header image on the home page, and removing it on all other pages (works very well for that). But could you help me with code that removes the header image from the home page, and displays it on all the other pages? Thank you in advance

<style>
{% unless template.name == 'index' %}
.site-header {
background-image: url("(image name).jpg");
background-size: 100%;
}
{% endunless  %}
</style>

 

0 Likes
Ninthony
Shopify Partner
1715 243 663

This is an accepted solution.

Change "unless" to "if" and "endunless" to "endif". Sorry not at a pc right now or I'd just repost it corrected for you.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
GoodKarmaCo
Excursionist
18 0 3

Thank you so so so much!!! That worked perfectly! I should've realized it was the opposite. Thank you again for all your help; wishing you a blessed year!

0 Likes
Ninthony
Shopify Partner
1715 243 663

No problem, glad it helped.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes