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

Solved

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

timo23
Tourist
13 0 1

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!

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

This is an 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>

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

This is an 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 %}

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

This is an 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>

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

timo23
Tourist
13 0 1

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 referenceIMG_2872.PNGIMG_2873.PNG

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

This is an 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 %}

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

timo23
Tourist
13 0 1

Thank you so much, greatly appreciated!

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

You are very welcome! 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.