Jump to content

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

Go to solution Solved by Beyondspace,

Recommended Posts

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!

Link to comment
  • Solution
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()
}

image.thumb.png.841f1ec5930840a7fb8e2c122a50ef53.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@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;
}
}

image.thumb.png.3a5ebbcf2df56e3c47da9ac781ef0012.png

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;
}
}

image.thumb.png.15d9b21325202dd396885924f362c2f6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.