Customize Header and Logo Color to Change When Scroll and Hover

Store Design
, ,
1

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

1 Like
2

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

3

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!

1 Like
4

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