Jump to content

Replace Logo on single page, hide current logo - CSS

Go to solution Solved by tuanphan,

Recommended Posts

Hey all,

I need your assistance with CSS.
I've successfully made code to add a custom logo that I've uploaded to custom files, the problem is the main site logo I want to replace (on this page only) is still visible. 

How can I hide the main site-wide logo on one page, but keep the new one I've added?

The page I want to do this on is /photo

The photo page should have the dark logo. The main logo is light.

Code I used to successfully add new logo:
 

#collection-63d1a5abb1fbe8770971fe49 {
  .header-title-logo img {
background-image: url(https://static1.squarespace.com/static/5f8f8579bd28b521edb70235/t/63db65ded0085b54d15159f7/1675322846377/thelandofdustin_logo_photo_dark.png);
}
}

It's important that I can achieve this with CSS as I can't add page specific code via code injection. Personal plan is what I have. 

www.dustin.land/photo
Site password is: SQtemp123

Your help is always appreciated! Thank you! 😊

Edited by DustinWilliam
Link to comment
  • Replies 4
  • Views 378
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

The easiest way is to use CSS to invert your logo, which might not work given your logo colour, but it's an option:

#collection-63d1a5abb1fbe8770971fe49 {
  .header-title-logo img {
    filter: invert(1);
  }
}

This code to swap the logo is different to yours and worth a try:

#collection-63d1a5abb1fbe8770971fe49 {
  #logo {
    background-image: url('https://static1.squarespace.com/static/5f8f8579bd28b521edb70235/t/63db65ded0085b54d15159f7/1675322846377/thelandofdustin_logo_photo_dark.png');
  }
}

Let me know if either solution works!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution
On 2/3/2023 at 3:19 AM, DustinWilliam said:

The code to swap does not work. using #logo doesn't work. It just hides all logos.

 

Replace this code

#collection-63d1a5abb1fbe8770971fe49 .header-title-logo img {
    background-image: url(https://static1.squarespace.com/static/5f8f8579bd28b521edb70235/t/63db65ded0085b54d15159f7/1675322846377/thelandofdustin_logo_photo_dark.png)
}

with this

#collection-63d1a5abb1fbe8770971fe49 .header-title-logo img {
    content: url(https://static1.squarespace.com/static/5f8f8579bd28b521edb70235/t/63db65ded0085b54d15159f7/1675322846377/thelandofdustin_logo_photo_dark.png)
}

image.png.d4400a52b689c3e06b53f70088665f65.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.