change header and logo color when scroll or hovver

Sohayl67 · ‎10-15-2024

Hello i need help,

I have the dawn theme

And i want to add a new design for myheader , i want the header to be invisible with a white logo when i'm at the top of the page ,when i hover on it or scroll down , the header change colour to white and the logo change to black . I thank you in advance for helping me !

Here is a website example that has the same design that i want :https://nourished3.eu/en-fr?currency=EUR

MY store : https://7968dc-f5.myshopify.com/

GTLOfficial · ‎10-15-2024

Hello @Sohayl67

Online Store ---> Themes ---> actions ---> edit code---> theme.liquid file, and add this code after <head>

<style>
{% if template == 'index' %}
.section-header .header-wrapper * { color: #fff; }
.section-header .header-wrapper .header__heading-logo { filter: invert(1); }
.section-header .header-wrapper { background: transparent; }
#MainContent { margin-top: -153px; }
.section-header.scrolled-past-header .header-wrapper { background: #fff !important; }
.section-header.scrolled-past-header .header-wrapper .header__heading-logo { filter: unset !important; }
.section-header .header-wrapper .mega-menu__link,
.section-header .header-wrapper .list-menu__item,
.section-header.scrolled-past-header .header-wrapper * { color: #121212bf !important; }
@media (max-width: 749px) {
#MainContent { margin-top: -97px; }
}
{% endif %}
</style>

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

Sohayl67 · ‎10-15-2024

The issue is that i want that the header is transparent and the logo white but when i hover on it or i scroll down , the color of the header goes to white and the logo to bblack. and i want that the header is sticky (if you can add animation of the logo changing and the header going from transparent to white ). i WANT the header to be like the same system that this website : https://www.vorelli.co.uk/

Dan-From-Ryviu · ‎10-15-2024

If you don't mind, please let me know your 'Collaborator request code' so I can send a collab request to access your theme so I can help you.

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Sohayl67 · ‎10-15-2024

7437 , and please

The issue is that i want that the header is transparent and the logo white but when i hover on it or i scroll down , the color of the header goes to white and the logo to bblack. and i want that the header is sticky (if you can add animation of the logo changing and the header going from transparent to white ). i WANT the header to be like the same system that this website : https://www.vorelli.co.uk/

Dan-From-Ryviu · ‎10-15-2024

I got it. Request sent

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Sohayl67 · ‎10-16-2024

i accepted the demand

Dan-From-Ryviu · ‎10-16-2024

Got it, please wait for a while

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Dan-From-Ryviu · ‎10-16-2024

Please check now

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Sohayl67 · ‎10-16-2024

Nothing changed sir !

Dan-From-Ryviu · ‎10-16-2024

Did you change the theme?

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Sohayl67 · ‎10-16-2024

sorry i have a new problem on my old so i used a backup theme and the backup has also an issue the button are very vvery big

Sohayl67 · ‎10-16-2024

can you help with this ?

Sohayl67 · ‎10-16-2024

if you look in any product the caracter of thebutton a 5x times morebigger than normal and also in the all product page the button are giant !!! help me for this plz

change header and logo color when scroll or hovver

change header and logo color when scroll or hovver

Community Blog Articles