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

Store Design
, , ,
1

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/

2

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

3

Hi Sahil,

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

4

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.

Best Regards

Sahil

5

Hi @JoeyRoo

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

This is perfect. Thank you