Jump to content

Inverting mobile logo color not working

Recommended Posts

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.

Link to comment
  • 1 year later...

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>

 

Link to comment
  • 1 year later...

Hi, i have the same issue for mobile on product and blog pages but the code unfortunately doesn't work on these pages. 

Currently I use this outdated code wich also doesn't  work properly on mobile.

Has anybody solved the issue? Thanks for your help.


<style>
 .view-item .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Edited by nfnty
Link to comment
22 hours ago, nfnty said:

Hi, i have the same issue for mobile on product and blog pages but the code unfortunately doesn't work on these pages. 

Currently I use this outdated code wich also doesn't  work properly on mobile.

Has anybody solved the issue? Thanks for your help.


<style>
 .view-item .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Can you share link to a product or blog page? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.