Dawn 12.0: How to Make Header Transparent on ONLY Home Page

Store Design
, , , , ,
1

Hello! I’m working a website and I want the banner image on the home page to bleed into the header. I was able to do this with the following CSS code, but now the header is transparent on ALL pages.

.header-wrapper.color-background-1.gradient {
  position: absolute;
  width: 100%;
  background: transparent;
  color: #000;
}
.header-wrapper * {
  color: #000;
}

I only want the header to be transparent on the home/landing page. What CSS should I add?

Here’s the preview URL https://rt5as761kwdd4lm7-59803566217.shopifypreview.com

2

Hi @nadiamejilla , First you need to remove

 background: transparent;

from your style , we will only added on the home page, go to theme.liquid file and add the following code in the bottom of the file above tag,

{% if template == 'index' %}

{% endif %}
1 Like
3

Hello! I deleted the code that I previously had and pasted your code in the theme.liquid file, but it didn’t change anything.

I liked how the previous code appeared, but I only want it applied to the home page. Please help! Thank you

4

Can you send a screenshot of theme.liquid file?

5

Nevermind I was able to fix it - thank you for your help!! I pasted the following code at the bottom of the theme.liquid file (above tag) to make it work.

{% if template == 'index' %}

{% endif %}
6

Glad I helped, so the problem that it wasn’t placed above body tag, right?

1 Like
7

Yes you’re right - I had initially made a mistake and placed it below the tag which is why it wasn’t working initially.

Anyways, thanks for your solution!

1 Like
8

Here is the transparent header:

9

Only on home page transparent header: