Hyde Template (Brine Family) - Logo Won't Invert For Individual Store Items

I'm currently having an issue where I've added some code to invert my site's logo from white to black on Hyde's white pages. This has worked everywhere EXCEPT for when individual products are opened from the store. So far, adding the individual page id solves the issue somewhat, but I have lots of products uploaded. This means adding individual page ids for ALL of them, and then the issue returns when a new product is added. Does anyone have any ideas on a faster, better way to do this that also is implemented when a new product is added??  I've attached screenshots of my issue - first is of the logo as it should appear; it's working on the store's main page where all the products appear, but when I select an individual item, it doesn't invert.

The code I've added to the site header is below (see how I added the collection ID for all the site's pages, but then needed to add the individual page id for each of the products so far?  There are many more products - that's just how far I got before my patience ran out.)

#collection-603087cac95f6a31e4c8dc2f, #item-603087cac95f6a31e4c8dc52,#item-603087cac95f6a31e4c8dc3a,#item-603087cac95f6a31e4c8dc2e,#item-603087cac95f6a31e4c8dc7a,#item-603087cac95f6a31e4c8dc72,#item-603087cac95f6a31e4c8dc4a,#item-603087cac95f6a31e4c8dc6a,#item-603087cac95f6a31e4c8dc62,#item-603087cac95f6a31e4c8dc42, #item-6041c6383f35b3501db8b167
{
  .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(1);
  }
}

8 hours ago, ayannakayc said:

I'm currently having an issue where I've added some code to invert my site's logo from white to black on Hyde's white pages. This has worked everywhere EXCEPT for when individual products are opened from the store. So far, adding the individual page id solves the issue somewhat, but I have lots of products uploaded. This means adding individual page ids for ALL of them, and then the issue returns when a new product is added. Does anyone have any ideas on a faster, better way to do this that also is implemented when a new product is added??  I've attached screenshots of my issue - first is of the logo as it should appear; it's working on the store's main page where all the products appear, but when I select an individual item, it doesn't invert.

The code I've added to the site header is below (see how I added the collection ID for all the site's pages, but then needed to add the individual page id for each of the products so far?  There are many more products - that's just how far I got before my patience ran out.)

 

#collection-603087cac95f6a31e4c8dc2f, #item-603087cac95f6a31e4c8dc52,#item-603087cac95f6a31e4c8dc3a,#item-603087cac95f6a31e4c8dc2e,#item-603087cac95f6a31e4c8dc7a,#item-603087cac95f6a31e4c8dc72,#item-603087cac95f6a31e4c8dc4a,#item-603087cac95f6a31e4c8dc6a,#item-603087cac95f6a31e4c8dc62,#item-603087cac95f6a31e4c8dc42, #item-6041c6383f35b3501db8b167
{
  .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(1);
  }
}

 

You can select all product page like so

.collection-type-products.view-item .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(1);
  }

and use the item id to exclude the effect on the product that you not want to apply the invert

15 hours ago, bangank36 said:

You can select all product page like so

.collection-type-products.view-item .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(1);
  }

and use the item id to exclude the effect on the product that you not want to apply the invert

Thanks so much! It worked!!! Are you able to tell me what I'm doing wrong with this script on mobile? The logo isn't showing up at all and I just need it to invert to black throughout as the mobile background is all white.

@media screen and (max-width:767px)
{ 
  .header-title-logo img {
    -webkit-filter: invert(100%);
 	filter: invert(1);  
	filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
}

PS: here's a screenshot of what I mean. The hamburger menu icon also doesn't change color if I try to adjust it, although if I switch the icon to something like 3 dots etc the color change takes effect. It's not a HUGE problem if I can get the logo to invert on mobile though, which isn't working at all.

18 hours ago, ayannakayc said:

PS: here's a screenshot of what I mean. The hamburger menu icon also doesn't change color if I try to adjust it, although if I switch the icon to something like 3 dots etc the color change takes effect. It's not a HUGE problem if I can get the logo to invert on mobile though, which isn't working at all.

Can you share site url?