Invert Blog Post Logo Image Color on Mobile

I successfully used the code from this post (Thanks @Paul2009) to invert the color of my logo in my blog posts:

https://answers.squarespace.com/questions/200238/marta-change-color-of-logo-on-blog-posts-only.html

However, it didn't invert the logo for blog posts on mobile, so now my mobile blog posts still have a white logo on a white background.

How can I invert the logo on blog posts on mobile?

Thanks!

@natalienet Use

@media screen and (max-width:767px) {
Your CSS
}

Ok, @tuanphan I did this, and it is not working. Did I put it together correctly?

Thanks.

@media screen and (max-width:640px) { .collection-type-blog .Header-branding-logo { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); }

@natalienet missing a }

@media screen and (max-width:640px) { 
.collection-type-blog .Header-branding-logo { 
    -webkit-filter: invert(100%); 
     filter: invert(100%); 
     filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); 
}
}

Put that new code in with the correct syntax, and it's still not inverting the blog post logo on mobile.

Thanks for trying though, appreciate it.

@natalienet Can you share your site url? Will easy to check cSS!

To folks following this question, here's a draft of an email you can submit to customer support, so that maybe they'll add this super basic and important feature!

Hello,

I would like to request that you offer styling options for blog post headers.

I have this problem, and I've seen many others with the same problem:

I have a white logo which shows against the banners I use throughout my site, but there is no option to add a banner or even a background color to blog posts, so my logo doesn't show on blog posts.

I can imagine you could create options for users to:

1. Add a universal banner to blog post headers
2. Add a universal background color to blog post headers
3. Change the logo for blog posts

This is super frustrating to not have options to modify this basic and important feature, so I hope you will implement a solution ASAP!

Thanks,

@tuanphan yes, it's still unpublished, but you can view it here, pw: s33m3https://silver-pug-58dj.squarespace.com/

@natalienet try replace .collection-type-blog with .view-itemIf it doesn't work, can you send a blog post url? I can't find blog post.....

@tuanphan Thanks. I'm sorry, I forgot to mention that the blog posts are under the "shows" in the menu. Go to "Shows" and you can click on any of the posts on that page to see a blog post. I will try the .view-item now. Thanks.

I figured this out! 😀

To recap, my site logo is white. When viewing the blog posts, however, my white logo was invisible because there's no option to upload a unique logo just for the blog (and you can't change the background color of the blog post headers without css).

I wanted my blog post header background to remain white and my logo to be black, so I added CSS to invert the colors on my logo.

Here's an example of one of my blog posts, so you can see it in action on desktop and mobile:
https://www.earthspeak.love/shows-1/iglivereplay-naomilove

Here's the CSS I used to invert the blog logo on both desktop and mobile.

/* Make Shows Blog Post Header Logo Inverted (Black) on desktop */
.collection-type-blog .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }

/* Making Shows blog post header logo inverted (black) on mobile */
@media only screen and (max-width: 640px) { .Mobile-bar-branding {
    -webkit-filter: invert(100%) !important;
    filter: invert(100%) !important;
    filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }}