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 …

Hello, @dngmanblack for CSS Go to Online Store Edit Code Find theme.css/base.css file 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 ea…

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

Customize Header and Logo Color to Change When Scroll and Hover

Store Design

mrashid_1 November 25, 2024, 2:39pm 2

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

Topic		Replies	Views
I want the header menu and logo to change color on scroll Store Design customizations	2	42	March 12, 2024
How can I make my website header stay transparent when scrolling? Store Design design , header , customizations , css	34	242	November 8, 2023
Change color of Header and Logo when hover or scroll down Store Design menu , header , shopify-themes	1	51	October 14, 2024
Color changing sticky header when scrolling, transparent to white (dawn theme) Store Design menu , design , header , customizations	1	94	March 1, 2024
Header Logo changing color when scrolling down Store Design design , css , shopify-themes	5	230	February 26, 2024

Customize Header and Logo Color to Change When Scroll and Hover

Related topics