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

nadiamejilla · ‎11-09-2023

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

Abdosamer · ‎11-09-2023

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 </body> tag,

{% if template == 'index' %}
<style>
.header-wrapper.color-background-1.gradient  {
     background: transparent;
}
</style>
{% endif %}

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

View solution in original post

nadiamejilla · ‎11-10-2023

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 <body> tag) to make it work.

{% if template == 'index' %}
<style>
.header-wrapper.color-background-1.gradient {
  position: absolute;
  width: 100%;
  background: transparent;
  color: #000;
}
</style>
{% endif %}

View solution in original post

Abdosamer · ‎11-09-2023

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 </body> tag,

{% if template == 'index' %}
<style>
.header-wrapper.color-background-1.gradient  {
     background: transparent;
}
</style>
{% endif %}

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

nadiamejilla · ‎11-10-2023

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

Abdosamer · ‎11-10-2023

Can you send a screenshot of theme.liquid file?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

nadiamejilla · ‎11-10-2023

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 <body> tag) to make it work.

{% if template == 'index' %}
<style>
.header-wrapper.color-background-1.gradient {
  position: absolute;
  width: 100%;
  background: transparent;
  color: #000;
}
</style>
{% endif %}

Abdosamer · ‎11-10-2023

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

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

nadiamejilla · ‎11-10-2023

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

Anyways, thanks for your solution!

MRamzan · ‎09-11-2024

Here is the transparent header:

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112

MRamzan · ‎09-11-2024

Only on home page transparent header:

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112

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

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

Community Blog Articles