[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