Jump to content

Changing Logo and header colors on different pages

Recommended Posts

Hi! Website link is at https://dog-maracas-wdgj.squarespace.com/about , password is underco. I'd like to find out if i can change the header color for that page ONLY. I want the header background to blend in with the pink, have my links white, and I would upload a white version of my logo.

Let me know how I can make this possible. Thank you.

Link to comment
  • Replies 3
  • Views 379
  • Created
  • Last Reply
2 hours ago, moonluvr101 said:

Hi! Website link is at https://dog-maracas-wdgj.squarespace.com/about , password is underco. I'd like to find out if i can change the header color for that page ONLY. I want the header background to blend in with the pink, have my links white, and I would upload a white version of my logo.

Let me know how I can make this possible. Thank you.

try

#collection-600fbc7f3ce99676bbc13bc0 .header {
    background-color: #d07192;
}
.header-title-logo img {
    filter: brightness(0) invert(1);
}
#collection-600fbc7f3ce99676bbc13bc0 .header-nav-wrapper a {
    color: #fff;
}
#collection-600fbc7f3ce99676bbc13bc0 .top-bun, 
#collection-600fbc7f3ce99676bbc13bc0 .patty, 
#collection-600fbc7f3ce99676bbc13bc0 .bottom-bun {
    background-color: #fff;
}

image.png.796e238b0ced3710c585d267217641d8.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
1 hour ago, bangank36 said:

try



#collection-600fbc7f3ce99676bbc13bc0 .header {
    background-color: #d07192;
}
.header-title-logo img {
    filter: brightness(0) invert(1);
}
#collection-600fbc7f3ce99676bbc13bc0 .header-nav-wrapper a {
    color: #fff;
}
#collection-600fbc7f3ce99676bbc13bc0 .top-bun, 
#collection-600fbc7f3ce99676bbc13bc0 .patty, 
#collection-600fbc7f3ce99676bbc13bc0 .bottom-bun {
    background-color: #fff;
}

image.png.796e238b0ced3710c585d267217641d8.png

Hi—can you let me know where I should inject this code? Thanks! @bangank36

Link to comment
7 minutes ago, moonluvr101 said:

Hi—can you let me know where I should inject this code? Thanks! @bangank36

Please try Design->Custom CSS

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.