Displaying an Alternate Logo for Portfolio Collection Page

Site URL: http://studioandprojects.co

Hi, 

Using version 7.1. 

I have uploaded a white logo on the site because most pages have a full bleed image on top. But there are a few pages where I'm not using an image and need to change the logo to black. I have managed find a custom css code that works for a regular page but it's not applying to the "portfolio collection" page.

I would like to have a black logo for the "portfolio collection" main page that displays all the projects but would like to keep the logo white on all of the individual project pages.

I have found this code to input into the "portfolio collection" page advance setting: 

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

However, it's applying to all the portfolio pages. And now when I scroll down I can't see the logo because the navigation is also black.

Hope my explanation made sense. Please help! Thanks in advance for the input.

Homepage with white logo:

Portfolio Collection main page (using the code):

Individual portfolio page (where I want a white logo):

Individual portfolio page navigation (where I want a white logo):

Remove your code & use this

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

Amazing! Thank you tuanphan! That worked perfect but now I have a separate question. 

I am using a fixed header so when I scroll down the logo and navigation links are not visible because they are set to white. 

What code could I implement on these individual pages to switch the logo and navigation links to black? 

Portfolio page with white logo and white navigation links: 

Header, scroll down. Would like to keep the header background white but would like to change the logo+navigation link to black:

Add to Portfolio Page Settings > Advanced > Header

<style>
.view-item .shrink .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
.view-item .shrink .header-nav-item a {
    color: black !important;
}
</style>