Jump to content

[Share] Change Logo on One Page

Recommended Posts

  

 

Some custom code to change Header Logo to another logo on

  • One Page
  • Desktop - Mobile 
  • Collection Page only (Blog/Product/Event)
  • Cart Page
  • Search Page
  • 404 Page
  • Before Scroll - After Scroll
  • ...

These code for 7.1. If you use 7.0, or the code doesn't work, just comment site url, we will check & give exact code.

  • In the code, I used a random image on Pixabay, you can upload it & replace with your logo image url.

#1. Change Logo on One Page

Edit Page > Add a Code Block > Paste the code

<style>
  header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }
</style>

#2. Change Logo on Desktop Only

Insert code to Custom CSS

@media screen and (min-width:768px) {
 header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }
}

#3. Change Logo on Mobile Only

SS has an option to do this, so no need to use code

image.thumb.png.bcbcefc4cb876175002c6c0ef28da9a7.png

#4. Change Logo Before Header Scroll

Insert code to Custom CSS

 header#header:not(.shrink) img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#5. Change Logo on Scroll

to Custom CSS

 header#header.shrink img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#6. Change Logo when Overlay Menu/Burger Menu is Open

 body.header--menu-open header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#7. Change Logo when Overlay Menu/Burger Menu is Close

body:not(.header--menu-open) header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#8. Change Logo on Blog Page (List + Detail post)

body[class*="type-blog"] header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#9. Change Logo on Blog List Page

body[class*="type-blog"].view-list header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#10. Change Logo on All Blog Posts

body[class*="type-blog"].view-item header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#11. Change Logo on Specific Blog Posts

Edit that post > Add a Code Block > Use this code

<style>
  header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }
</style>

#12. Change Logo on Shop/Category Page

Insert to Custom CSS

body[class*="type-products"] header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#13. Change Logo on Product Detail Page

body[class*="type-products"].view-item header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#14. Change Logo on Some Specific Products

First create a tag with name: clg

Next, use CSS code

.tag-clg header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

(clg means change logo :-D)

#15. Change Logo on 1 Product

Edit Product > Additional Info > Add a Code Block > Use code

<style>
  header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }
</style>

#16. Change Logo on Event Page

To Custom CSS

body[class*="type-events"] header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#17. Change Logo on Event List Page

To Custom CSS

body[class*="type-events"].view-list header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#18. Change Logo on Event Detail Page

To Custom CSS

body[class*="type-events"].view-item header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#19. Change Logo on 1 Event

Edit that Event > Add a Code Block in Event Description/Content > Paste this code

<style>
  header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }
</style>

#20. Change Logo on Cart Page

To Custom CSS

body#cart header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#21. Change Logo on Search Page/Search Results Page

Add to Settings > Developer Tools > Code Injection > Footer (or Website > Website Tools > Code Injection > Footer)

<script>
if (document.location.pathname.indexOf("/search") == 0) {
    document.querySelector('body').classList.add('t-search')
}
  </script>
<style>
  body.t-search header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }
</style>

#22. Change Logo on 404 Page

body#not-found header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }

#23. Invert Logo Color

Colored Logo to Black

header#header img {
    filter: brightness(0) invert(0);
}

Colored Logo to White

header#header img {
    filter: brightness(0) invert(1);
}

To apply to specific pages, you can add pre-fix, similar code in #1 to #20

#24. Invert Black Logo to White (One Page)

<style>
  header#header {
	filter: invert(1);
	-webkit-filter: invert(1);
}
</style>

If you use Business Plan or higher, add it to Page Header Code Injection

If you use Personal/Basic Plan, you can edit page > Add a Code Block (anywhere on page)

#25. Invert White Logo to Black (One Page)

Same code #24

Edited by tuanphan
update #24, #25

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
  • 3 weeks later...

Hi, I attempted #11 and it did not work. 

I have three unique blogs on my site and I would like each blog to have its own logo. (Similar to verticals on NYMag.com)

Is there a code solution so that: 

My main site header remains the main publication's header.

Blog #1 (collection page, individual blog posts) has Blog #1 Header.

Blog #2 (collection page, individual blog posts) has Blog #2 Header.

Blog #3 (collection page, individual blog posts) has Blog #3 Header.

Can the CSS differentiate between each collection and allow it to be uniquely headed? Many thanks for your help.

Angela

Link to comment
8 hours ago, angela10193849202 said:

Hi, I attempted #11 and it did not work. 

I have three unique blogs on my site and I would like each blog to have its own logo. (Similar to verticals on NYMag.com)

Is there a code solution so that: 

My main site header remains the main publication's header.

Blog #1 (collection page, individual blog posts) has Blog #1 Header.

Blog #2 (collection page, individual blog posts) has Blog #2 Header.

Blog #3 (collection page, individual blog posts) has Blog #3 Header.

Can the CSS differentiate between each collection and allow it to be uniquely headed? Many thanks for your help.

Angela

You need to use this code to each blog page header

<style>
  body[class*="type-blog"] header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/08/08/15/01/flower-8177578_1280.jpg);
  }
</style>

Note: This code for SS 7.1 version, if you use 7.0, will need a different code

If code still doesn't work, can you share link to a blog page on your site? We can check easier

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
  • 1 month later...
  • 3 weeks later...
On 1/20/2024 at 1:32 AM, christined said:

I would love help with code for 7.0 to change logo on one page.  https://pacedevelop.com/custom-homes  I attempted with code I found in a couple tutorials but not working. Client is on a legacy plan (Professional) —  that level allows CSS, but still wonder if that could be part of problem. 
 

thanks very much!

The site is 7.0 version, above code is for 7.1 version

With your case, first you edit /custom-homes page > Add a block > Choose Code > Then paste this code

<style>
  .title-nav-wrapper img {
    content: url(https://cdn.pixabay.com/photo/2023/03/15/16/17/feather-7854908_1280.jpg);
}
</style>

image.thumb.png.f0a38138b263d4dbbeb6d98412c09ae2.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
  • 2 months later...
On 4/24/2024 at 12:32 AM, holliecooper said:

Hi! I tried #1 - Is there any way to do this if the image doesn't have a URL? I have an image but it's to upload straight from my desktop if that's possible

 

Hollie 🙂

You need url. If you don't know how to get url, you can create a test page > Add a Gallery > Upload your image > Save > Right click on Image > Copy Image Address Url.

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.