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
On 1/4/2021 at 10:56 PM, NiallEwart said:

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
17 hours ago, NiallEwart said:

Mobile uses this code

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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.