On Home Page, Header should be transparent, when scroll down, should turn to normal, solid white

On Home Page, Header should be transparent, when scroll down, should turn to normal, solid white

Tom202
Excursionist
16 0 11

Hi Shopify Community,👏

 

I go crazy for days now with my header. I am a newbie at website building, but this community has helped already a bunch, so I thought to give it a try:

 

In the Dawn Theme, on the home page, I like to make the Header transparent so that the Hero image comes to full focus. Once, the use scrolls down, the header should appear in a normal behavior (for me,  it's not that important whether the header is sticky or not 🙂 ). This should only happen on the home page.

 

I tried already all of potential solution, I have found in here (at least, that's my feeling). One made the header transparent only, another one worked but then screwed up the headers for the other subpages and another messed-up the mobile version.

 

Anyone in here with magic skills, who could help me?

Here is the site: www.bienenblatt.de

 

Thanks a bunch in advance!🙌

Replies 9 (9)

Made4uo-Ribe
Shopify Partner
8872 2122 2607

Hi @Tom202 

If you edit common area of the store it means it would affect the other pages. But if you dont care if your header sticky or not then maybe it okay to be this code. Try this code. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • Open the "theme.liquid" and paste this code below before this tag </body> .

 

sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
    background: transparent;
}
div#Banner-template--19525219909977__image_banner {
    top: -121px;
}

 

  • And Save. 
  • Result: Desktop
  • Ribe_Dagandara_0-1693150039141.png

    Mobile:

  • Ribe_Dagandara_1-1693150066837.png

     

I hope it help.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Tom202
Excursionist
16 0 11

Hi Ribe, thanks for your feedback. I just followed your instructions, but it did not work out for me, unfortunately. 😞

 

Also, I forgot to mention, since I am using a dark hero image, the Navigation page names should be in white color first (plus my brand image should be in white), and change to the normal black once the user scrolls down.

 

You think, you might know a way around?

Really appreciated!

Made4uo-Ribe
Shopify Partner
8872 2122 2607

Yes, ive already think of that the font color. But you need a javascript for that. 

So Im just playing around with the css so here ive got. 

Ribe_Dagandara_0-1693153683133.png

Ribe_Dagandara_1-1693153842693.png

 

The color change every 5s. 

You can try this code again with the important. 

sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
    background: transparent !important;
}
div#Banner-template--19525219909977__image_banner {
    top: -121px !important;
}

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Tom202
Excursionist
16 0 11

Hi Ribe, thanks for that, but I am afraid it still does not work for me 😞 

 

Not sure, what I can do...

Made4uo-Ribe
Shopify Partner
8872 2122 2607

Can you try it to paste it on the theme.liquid. 

Open the theme.liquid paste it on before the this tag </body> the code below. 

<style>
sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
    background: transparent !important;
}
div#Banner-template--19525219909977__image_banner {
    top: -121px !important;
}
</style>
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Tom202
Excursionist
16 0 11

Hi Ribe, thanks a lot. It made the Header transparent 🙂 I changed the hero image, so for now there is no need to make the header in white font.

 

However, if I scroll down on the home page, the header background is not solid white and overlaps with the site's content. Once scrolled down, the header should have a white solid background. This same behavior happens on the other subpages as well. The header should have a white solid background. Same behaviour is for the mobile version.

Tom202_2-1693294065480.png

 

You think, you might find a solution here 🙂 ?

 

 

Tom202
Excursionist
16 0 11

Hi @Made4uo-Ribe , any further ideas to find a solution who to make the header solid white when scrolled down? (and also solid white for all other subpages)

 

It would be really awesome, if we find a solution here! Really appreciated. 

🖐

Made4uo-Ribe
Shopify Partner
8872 2122 2607

For that deisgn you need another code to write. And you need a developer to write the code. This is only i can do for the css. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Tom202
Excursionist
16 0 11

Hi @Made4uo-Ribe, ah shoot. I thought Javascript would only be needed for header colour font change, which I don't need anymore

 

The only thing missing is to make the transparent header into white when scrolled down.

 

You know of someone, who might be able to help here:)?