how do i make one page logo a different colour on mobile

Site URL: https://spinach-tarpon-d9kn.squarespace.com/trade

Hi, 

The logo is the right colour when viewing on desktop but it hasn't worked when you view on mobile. Could someone please help me figure this out?

https://spinach-tarpon-d9kn.squarespace.com/trade

PS: CarrionBelts

Add to Design > Custom CSS

body:not(.header--menu-open) .header-mobile-logo {
    filter: brightness(0) invert(1);
}

On 9/25/2022 at 2:45 AM, tuanphan said:

Add to Design > Custom CSS

body:not(.header--menu-open) .header-mobile-logo {
    filter: brightness(0) invert(1);
}

 

This has stopped the desktop version working. Could you help please?
https://spinach-tarpon-d9kn.squarespace.com/trade

PS: CarrionBelts

If you want code run on mobile only, use this new code

@media screen and (max-width:991px) {
body:not(.header--menu-open) .header-mobile-logo {
    filter: brightness(0) invert(1);
}
}