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

[timo23]

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!

[Dan-From-Ryviu · Accepted solution]

Hi @timo23 

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

<style>
@media (max-width: 749px) {
.sticky-header.is-scrolling .site-header__logo .inverted-logo { 
display: none !important; }
.sticky-header.is-scrolling .site-header__logo .default-logo { display: block; }
}
</style>

[Dan-From-Ryviu · Accepted solution]

Hi @timo23 

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

<style>
@media (max-width: 749px) {
.sticky-header.is-scrolling .site-header__logo .inverted-logo { 
display: none !important; }
.sticky-header.is-scrolling .site-header__logo .default-logo { display: block; }
}
</style>

[timo23]

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

[Dan-From-Ryviu · Accepted solution]

Please update code to this 

{% if template == 'index' %}
<style>
@media (max-width: 749px) {
.sticky-header.is-scrolling .site-header__logo .inverted-logo { 
display: none !important; }
.sticky-header.is-scrolling .site-header__logo .default-logo { display: block; }
}
</style>
{% else %}
<style>
@media (max-width: 749px) {
html .site-header__logo .inverted-logo { display: none !important; }
html .site-header__logo .default-logo { display: block !important; }
}
</style>
{% endif %}

[timo23]

Thank you so much, greatly appreciated!

[Dan-From-Ryviu]

You are very welcome!