Invert Logo Color on individual blog posts, not on the front page of the blog

Site URL: https://www.riverstonechurch.net/

Hi, I want to be able to change the color of the logo to match the color of the menu on my blog.  When you first land on the blog page where the blog posts are aggregated, I want it to be white (which it is)...but when you click on an individual blog post, I need to it change dark.  I have tried the following code:

.collection-type-blog .Header-inner img {

  filter: invert();

}

Which does change the color...but on the front page and on the individual posts.  Is there a way to change it on the individual posts without the front page?

https://www.riverstonechurch.net/blog

51 minutes ago, rmccready said:

Site URL: https://www.riverstonechurch.net/

Hi, I want to be able to change the color of the logo to match the color of the menu on my blog.  When you first land on the blog page where the blog posts are aggregated, I want it to be white (which it is)...but when you click on an individual blog post, I need to it change dark.  I have tried the following code:

.collection-type-blog .Header-inner img {

  filter: invert();

}

Which does change the color...but on the front page and on the individual posts.  Is there a way to change it on the individual posts without the front page?

 

https://www.riverstonechurch.net/blog

Use this

.collection-type-blog.view-item .Mobile-bar img, 
.collection-type-blog.view-item .Header-inner img {
    filter: invert();
}

Perfect.  Thank you so much.  I am very grateful!

Hey @bangank36! For some reason, this didn't work for me. Is it for 7.1?

I am also looking to invert the logo color - just on the individual blog pages.

https://clavichord-cardioid-355d.squarespace.com/
pass: morocco

On 8/2/2021 at 5:02 AM, graceandoak said:

Hey @bangank36! For some reason, this didn't work for me. Is it for 7.1?

I am also looking to invert the logo color - just on the individual blog pages.

https://clavichord-cardioid-355d.squarespace.com/
pass: morocco

Add to Design > Custom CSS

/* blog posts logo */
body.collection-type-blog-basic-grid.view-item header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

Do you want to change right menu items color on homepage?

@tuanphan YES please! I am running into the issue where on pages that have an image in the first section, its showing up as black. But on pages that dont have an image (i.e. shop page) - it works fine. How do I tell SS to invert the right menu when there is an image? Same with when I scroll down and the nav bar is sticky...

On 8/4/2021 at 4:19 AM, graceandoak said:

@tuanphan YES please! I am running into the issue where on pages that have an image in the first section, its showing up as black. But on pages that dont have an image (i.e. shop page) - it works fine. How do I tell SS to invert the right menu when there is an image? Same with when I scroll down and the nav bar is sticky...

Hi. It looks like you solved this?