How to change logo color or nav bar background color for blog posts only

Site URL: https://www.nadiajoycephotography.com/blog/bewitching-fall-backyard-wedding-damascus-or

Hi folks,

I just realized that on my blog posts my logo in my site header disappears because the image file is white, and I've got my blog posts set up with a white minimal background (I'd like to keep it that way). Is there a way I can force the nav bar on my blog post pages to render with a different background color so the logo shows up? Alternatively, would love a way to be able to use the black version of my logo in the header on *just* blog post pages, but that sounds like it may not really be doable since that's an image file I upload and it's a sitewide item.

Any help is much appreciated!

2 hours ago, nadiajoyce said:

Site URL: https://www.nadiajoycephotography.com/blog/bewitching-fall-backyard-wedding-damascus-or

Hi folks,

 

I just realized that on my blog posts my logo in my site header disappears because the image file is white, and I've got my blog posts set up with a white minimal background (I'd like to keep it that way). Is there a way I can force the nav bar on my blog post pages to render with a different background color so the logo shows up? Alternatively, would love a way to be able to use the black version of my logo in the header on *just* blog post pages, but that sounds like it may not really be doable since that's an image file I upload and it's a sitewide item.

 

Any help is much appreciated!

You can add this to Design->Custom Css

[class*='collection-type-blog']  .header-title-logo img {
  filter: invert()
}

@bangank36 Thank you so much! This is exactly what I was hoping for! Appreciate it!

@nadiajoyce I see your site has blue space on right of screen.

You can add this to Custom CSS to remove it

@media screen and (max-width:767px) {
html, body {
    overflow-x: hidden;
}
}

Also, the pagination title on mobile looks hugeeeee & overlap. Use this code to resize it (or move it)

The code will remove title, add Prev/Next

/* pagination title */
@media screen and (max-width:767px) {
.white.item-pagination[data-collection-type^="blog"] .item-pagination-title {
    display: none;
}
.white.item-pagination[data-collection-type^="blog"] .item-pagination-prev-next {
    display: block;
}
}