Hello again!
The company for which we build a site has a logo that changes depending on whether the language is French or English.
Currently in Appearance → Customize section, the settings are for all languages.
Is there a way to translate the different versions of the header logo?
To see the Website:
http://navanex.audace.qc.ca/Navanex / Ch@ntierN4val
Regards,
Mario
Comments
In your case, you will have to replace 2 images: for light variant logo and for the sticky variant logo.
You can use custom CSS for this. Let's switch images only in case of the French language. Please add such custom CSS: Best to use the same proportion logo image in this case.
With kind regards.
Good! It's works by using custom CSS (rather than additional CSS)!
How to change the version for high resolution screen? Can I add a CSS with a link to the larger image?
Many thanks to you and best regards!
Mario
I canno't test at this time but it's sound like good!
Many thanks to you!
Bests regards,
Mario
Website is now online!
Have a little problem with my logo in English in the mobile version, the logo in header don't appeir:
http://navanex.ca/en/
Can you give me the good CSS code (as your suport in August) for logo in english and french for mobile version?
Regards,
Mario
@media screen,
only screen and (max-width: 600px) {
html[lang="fr-FR"] a.sticky-logo{
background-image: url(/wp-content/uploads/2019/06/navanex_fr_c.png);
}
html[lang="fr-FR"] a.light-logo{
background-image: url(/wp-content/uploads/2019/06/navanex_fr_b.png);
}
html[lang="en-EN"] a.sticky-logo{
background-image: url(/wp-content/uploads/2019/07/navanex_en_c.png);
}
html[lang="en-EN"] a.light-logo{
background-image: url(/wp-content/uploads/2019/07/navanex_en_b.png);
}
}
About your CSS: please try to use absolute links to images. It means it should be the full address. Why? It will save your skin in some future situations ;-)
Instead of this Use something like this Other parts look good.
Looks like you have made it without my help :-) Nice!
With kind regards.
My best regards,
Mario