Transparent Header Turns to a Solid Color On Scroll

Store Design
, ,
1

Hey, I recently started working on a template without knowing much about coding. I came a long way but still need help on many things. Such as: I want to achieve transparent header effect while Iā€™m at the top of my home page. When I scroll past the image on top, it should turn to a solid white. Also I need help with putting image behind the header. I am a newbie and appreciate any kind of help. Thanks.

website link: www.moonlever.co

2

Hello @ozank ,

To achieve transparent header effect and turn to a solid white when scroll through the image on top, you can try to follow these steps:

  • Go to Online Stores ā†’ Themes ā†’ Actions ā†’ Edit code
  • Go to theme.liquid file ā†’ Add the following HTML code before the tag:
  • Go to Assets folder ā†’ base.css file ā†’ add the following code:
header {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: background-color 0.3s ease-in-out;
}

header.solid {
  background-color: #fff;
}
  • Save and preview

And for your second question, are your trying to add a hero image and transparent header? If so, you can try to do this:

  • Repeat step 1
  • Go to theme.liquid file ā†’ add the following HTML code immediately after the opening tag:
  • Go to Assets folder ā†’ base.css file ā†’ add the following CSS code to the end of the file:
.hero-image {
  position: relative;
  width: 100%;
  height: 500px; /* adjust to your desired height */
  overflow: hidden;
  z-index: -1;
}

.hero-image img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
  z-index: -1;
}

header {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: background-color 0.3s ease-in-out;
}

header.solid {
  background-color: #fff;
}
  • Save changes

Hope this can help you out.

Ali Reviews team.

3

Hi @ozank

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
.is-fixed .header-menu-wrapper {background-color: #f6f6f6;}

Regards,

San

4

hey, thanks for your reply. the thing is, i already have a header that is sticky so i only need it to be transparent then go solid white. I couldnt achieve this effect with the code you written. the header went up when I scrolled down, then came up when I scrolled up after I pasted the code you written. If you would like to try a bit more and help Iā€™d happily share the whole code with you.

5

it didnt work unfortunately

6

Hi @irene-vintage ,

I am also working on trying to get my header transparent to solid white upon scroll and your solution worked well. However, the white header does not go the full width upon scroll. Do you know how to make it the full width?

Screen Shot 2024-01-29 at 9.33.30 PM.png
Screen Shot 2024-01-29 at 9.33.30 PM.png1410Ɨ539 353 KB

7

Just wanted to ask how I can change the colour of my text when the colour reappears because it shows the text staying white.

my website is ā€œst4rz.orgā€ if you were looking to see what I meant because it makes the header just the logo and shows no menu because it is all the same colour