How to make my logo invertible on mobile as I scroll through the banner photo

Hello I would like to invert my logo on mobile the same way it inverts on desktop.

As you scroll through the initial banner (slideshow) photo

I cannot upload the inverted logo for mobile through the theme. is there a custom way to do so?

website: https://4bubs.com/

password: timo23

Thank you for all the help!

Hi @timo23

Please add this code to theme.liquid file, before in Online Store > Themes > Edit code then check and check again


1 Like

I have added your code, and it worked almost perfectly.

However for instance when I go to product, the logo at the start is inverted. Once i scroll down it changes to original.
Any option to have it original all the time on all the pages that do not have slideshow banner image on top.

So inverted logo is only active while in overlay of banner, otherwise it is always original logo.

Attaching photo for reference

Please update code to this

{% if template == 'index' %}

{% else %}

{% endif %}
1 Like

Thank you so much, greatly appreciated!

1 Like

You are very welcome!