How can I alter my website's logo and header appearance on hover or scroll?

JoeyRoo · ‎03-20-2024

Two part questions

1. Is there a way to adjust my logo so that it is White when my page loads then it switches to black when someone hovers or scrolls and the White Header background appears?

2. Is there a way for the Centre Logo to shrink when someone hovers or scrolls and the white header background appears. I also want the header menu bar to get smaller overall when someone hovers or scrolls.

This is my website - https://theothelabel.com/

and this is an example of what I am trying to achieve that is on this other website - https://www.twpclothing.com/

Dan-From-Ryviu · ‎03-20-2024

Hi @JoeyRoo

You can do that by adding this CSS code to your theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
.header.transparent--true:not(:hover):not(.is-sticky) .logolink .logoimg--light {
    filter: invert(1);
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- 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.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

sahilsharma9515 · ‎03-20-2024

Hi @JoeyRoo I have looked into your site and the reference site.

Both the points needs the custom coding to achieve the desired result as you want.

I have looked int the reference site as well and they have also achieved it with the help of custom coding, so you need to attain this with the help of custom coding.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

- Your

Coffee Tip

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !

- Hopefully the solution will help you. If yes then Please hit

Like

and

Mark it as solution! ❤️

JoeyRoo · ‎03-20-2024

Hi Sahil,

If you are able to assist with the custom coding on this, that would be
greatly appreciated.

sahilsharma9515 · ‎03-20-2024

Hi @JoeyRoo Yes I would love to help you, for applying the changes I will need the access of your store so that I can work on this.