Dawn theme header only on hover color should be there on both mobile and desktop screen

[Sivadarshan]

I'm using the latest version of the Dawn theme. I need to customize the header so that its color changes only on hover, and the text turns black on both mobile and desktop. Additionally, the header should be transparent when scrolling. These changes should apply only to the homepage.

website: https://offnorth.com/

Thanks in advacne

[DaisyVo]

Hi @Sivadarshan 

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
header.header:hover {
    background: white !important;
}
header.header:hover * {
    color: black !important;
}
header.header:hover .header__heading-logo-wrapper img {
    filter: invert(1) !important;
}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[Sivadarshan]

@DaisyVo The header is changing but the logo color I no need but logo wants to be changed with black and orange text on hover. Also when hover on menu it should hold for 0.5 seconds because it was fraction it was closing