Customize Header and Logo Color to Change When Scroll and Hover

[dngmanblack]

Hi!

I want to add a new design to my header. When I am at the top of the page, my header is transparent with a white logo. But when I hover over or scroll down, I want all of the elements on header section to turn black. I'm using Dawn theme. Thanks for your help!
This is my store: www.siulux.com
PW: @Siulux19

[mrashid]

@dngmanblack Yes, it is absolutely possible to achieve this effect with a combination of CSS and updates to the Liquid code. 

[topnewyork · Accepted solution]

Hello, @dngmanblack  for CSS

1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

header {
  background-color: transparent !important;
  transition: background-color 0.3s ease !important;
}

header a {
  color: white !important;
  transition: color 0.3s ease !important;
}

header:hover {
  background-color: black !important;
}

header:hover a {
  color: white !important;
}

header.scrolled {
  background-color: black !important;
}

header.scrolled a {
  color: white !important;
}

Thanks!

[dngmanblack]

it's working, many thanks! Can you help me how to move the menu on above the logo image?