Different logo on different page

[antoine_generau]

Hello,

Is there a way to display a different logo on different pages? There are pages with a transparent header (with an image below it) and the logo should therefore be different than on pages with plain header.

Thanks,
Antoine

[thai]

Hi There,

It could be done with the custom CSS, please add this custom CSS under Theme Options > CSS:

.page-id-3667 .x-brand img {
    opacity: 0;
}
.page-id-3667 .x-brand {
    background: url(https://lecoqdigital.com/wp-content/uploads/2018/05/Logo-Web-Le-Coq-Digital-Marketing-1.svg) center center no-repeat;
    background-size: 100%;
}

The 3667 number should be the page ID. To find a page ID, please take a look at this:

https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Hope it helps

[antoine_generau]

Thank you very much for your help!

[christian]

You’re welcome, Antoine. I would strongly recommend though that you use Pro for this project because you won’t need custom code to achieve this. You also would have lots of options if you use Pro. Since this is also not a feature offered in X and requires custom code to achieve, this essentially is theme modification and this is outside the scope of our support according to our Terms.

If you don’t want to convert, I’d at least recommend that you use the Content CSS instead of the Global CSS. You can see the method in this similar guide at https://youtu.be/kre6O7AZKbM

The benefits of that are:

• The CSS @thai gave was page specific so it will be doing nothing for other pages so it will just add a bit of bloat globally.
• You won’t have to do the page ID step.

Hope that adds more knowledge to you.