How to add fade in transition from transparent to black header background

Store Design
1

Dawn Theme

Below is the code that I’m trying to adjust.

{%if template contains 'index'%} .header-wrapper.gradient{ background:transparent !important; } .scrolled-past-header .header-wrapper.gradient{ background:#000000!important; } #MainContent{ margin-top:-96px!important; } {%endif%}

I have it so that when I scroll past the header my transparent background becomes black. I want to make it so that it fades into the black, rather than being abrupt. How can I do this?

Thank you in advance.

2

Hi, the CSS I have provided below is a sample code for transition. You can adjust your classes according to it.

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background-color: transparent; /* Initial background color */
  transition: background-color 0.5s ease; /* Fade-in transition */
}

.site-header.active {
  background-color: black; /* Background color when scrolled */
}
3

Where should I paste thise?

4

You can place this either in base.css or theme.liquid.

5

hey mr farantriq i am clueless in coding what should i put the values to for the header to be a half half fade with the solid black starting from the top. im using the default header from the refresh theme