Inverting mobile logo color not working

Site URL: https://niallewart.com

Hi,

My home page has a dark background, so I've made my logo & mobile logo images white, and this works great.

My portfolio pages though have light backgrounds, so I need to invert the color of my logos so that they're black. I can do this with the main logo image easy enough, but nothing I try works for the mobile logo.

Currently my audio programming portfolio code injection (the page I'm testing on) has this:

Quote

<style>
@media screen and (min-width:5px) {
  .header-title-logo img {
    filter: invert(100%);
}
}
</style>

I had originally tried with (max-width:767px) as I saw that posted on forums, but it didn't work. I changed it to min-width just so that it would include on screens of any size, and the above code does change the main logo how I want it to, but still no effect on the mobile logo. And removing the first line works well enough but obviously just for the main logo.

Scratching my head at this one, not seeing what exactly I'm doing wrong here. Many thanks for any help.

Hi. Can you share link to porfolio? We can help easier

1 hour ago, tuanphan said:

Hi. Can you share link to porfolio? We can help easier

https://chihuahua-bat-5zt5.squarespace.com/config/pages/5f7f8aa5df269c14a342da39

Hopefully that's the right link

On 1/4/2021 at 10:56 PM, NiallEwart said:

https://chihuahua-bat-5zt5.squarespace.com/config/pages/5f7f8aa5df269c14a342da39

Hopefully that's the right link

/config is admin url. See how to find page url.

6 hours ago, tuanphan said:

/config is admin url. See how to find page url.

https://www.niallewart.com/audio-programming
password: 123456

17 hours ago, NiallEwart said:

https://www.niallewart.com/audio-programming
password: 123456

Mobile uses this code

<style>
.header-mobile-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

6 hours ago, tuanphan said:

Mobile uses this code

<style>
.header-mobile-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

 

Perfect! Many thanks 😊

So this selector no longer works on mobile using SS 7.1 with their new grid system—I've used the old aforementioned one for a while and it suddenly stopped working. Still works for desktop but not mobile for some reason. Haven't found anyone with a solution so I figured it out myself...eventually. For anyone who stumbles upon this thread try putting this in the page's header code injection:

<style>

 /* Invert Mobile Logo */
  #header > div.header-announcement-bar-wrapper > div.header-inner.container--fluid.header-mobile-layout-logo-left-nav-right.header-layout-nav-right > div.header-display-mobile > div.header-title-nav-wrapper > div.header-title.header-title--use-mobile-logo.preSlide.slideIn > div.header-mobile-logo > a > picture > img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>