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

Store Design
,
1

Hi Shopify Community, :clap:

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 :slightly_smiling_face: ). 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! :raising_hands:

2

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 .
sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
    background: transparent;
}
div#Banner-template--19525219909977__image_banner {
    top: -121px;
}

I hope it help.

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

3

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

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!

4

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_0-1693153683133.png1143×313 281 KB

Ribe_Dagandara_1-1693153842693.png
Ribe_Dagandara_1-1693153842693.png1158×238 97.1 KB

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

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

Not sure, what I can do…

6

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

Open the theme.liquid paste it on before the this tag the code below.
7

Hi Ribe, thanks a lot. It made the Header transparent :slightly_smiling_face: 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
Tom202_2-1693294065480.png1870×955 261 KB

You think, you might find a solution here :slightly_smiling_face: ?

8

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.

:hand_with_fingers_splayed:

9

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.

10

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:)?