[Share code] Change Logo on One Page

Some CSS code to change Logo on One Page. All code, you can add to Custom CSS box

Replace Pixabay with your new logo url.

#1. One Page

Use this code to Page Header Code Injection (If your site plan doesn't support Code Injection, you can edit page > Add a Block > Choose Code > Then paste the code).

<style>
header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}
</style>

#2. Change Logo on Desktop Only

add to Custom CSS box

/* Desktop Only */
@media screen and (min-width:768px) {
header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}}

#3. Change Logo on Mobile Only

/* Mobile Only */
@media screen and (max-width:767px) {
  header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}
}

#4. Change Logo on Blog Page (List)

/* Blog Page (list) */
[class*="type-blog"].view-list header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}

#5. Change Logo on Blog Post

/* Blog Post */
[class*="type-blog"].view-item header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}

#6. Change Logo on Event List

/* Event List */
[class*="type-event"].view-list header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}

#7. Change Logo on Event Detail

/* Event Detail */
[class*="type-events"].view-item header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}

#8. Change Logo on Shop/Category Page

/* Shop/Category */
[class*="type-products"].view-list header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}

#9. Change logo on Individual Products

/* Individual Product */
[class*="type-products"].view-item header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}

#10. Change Logo on Cart Page

/* Cart Page */
body#cart header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}

#11. Change Logo on Homepage Only

/* Homepage Only */
body.homepage header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}

#12. Change Logo on Other Pages (Exclude Homepage)

/* Other pages - exclude homepage */
body:not(.homepage) header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}

#13. Change Logo on Scroll Only

/* On Scroll Only */
header#header.shrink img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}

#14. Change Logo when Burger Menu is Open

/* When burger menu is open */
body.header--menu-open header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg);
}

If you still have problem when changing logo, just comment below with your site url, I will check it again.

Hello!

How do I change the logo depending on what color theme I choose for my page / first section of page?
I'm looking for a way to pre-define that for all themes in the Custom CCS box.

On 4/18/2024 at 2:57 PM, Octavarium said:

Hello!

How do I change the logo depending on what color theme I choose for my page / first section of page?
I'm looking for a way to pre-define that for all themes in the Custom CCS box.

when you assign a Color Theme, header will have a class like this

For example, I Set Light 1, so header will have class "light"

so I think you can share link to some pages where you assign theme color, I will check and give you exact code

Hi @tuanphan

I am working on a website that uses 7.0.

Can you please help me with what code, and where to put this, in order to change the logo image on specific pages?

https://www.chromainteriors.co.nz/

Image URL is here.

Many thanks

Frances

On 5/8/2024 at 10:34 AM, Keenan1 said:

Hi @tuanphan

I am working on a website that uses 7.0.

Can you please help me with what code, and where to put this, in order to change the logo image on specific pages?

https://www.chromainteriors.co.nz/

Image URL is here.

Many thanks

Frances

 

You can use this CSS code

body#collection-66147fbd4e22237e86ba63f9 h1.logo img {
    content: url(https://static1.squarespace.com/static/5d216c7acc2bcb0001415a9e/t/663ae301d36f660637a607d1/1715135233749/Chroma+Interiors+LogoColour.png);
}

I'm having trouble with logo on my homepage-- the sizing and positioning isn't right 

5 hours ago, lauraclay said:

I'm having trouble with logo on my homepage-- the sizing and positioning isn't right 

You can check again.....Code I shared is different

see #1 code

that worked so much better! The logo just won't center now no matter what 'design' I choose for the header, too. ps- @tuanphan you are a legend. I am low-key geeking out that you are helping me!! 

I figured it out!! Thank you again!