Before you ask please READ THIS

Change header logo according to the language / WPML

in Starter Posts: 13
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

  • AirAir
    Posts: 10,970
    Hey :-)

    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:
    html[lang="fr-FR"] a.sticky-logo{
    	background-image: url(http://192.168.1.2/wordpress/fatmoon/wp-content/uploads/sites/4/2016/02/logo.png);
    }
    html[lang="fr-FR"] a.light-logo{
    	background-image: url(http://192.168.1.2/wordpress/fatmoon/wp-content/uploads/sites/4/2016/02/logo.png);
    }
    Best to use the same proportion logo image in this case.

    With kind regards.


  • Posts: 13
    Hello,

    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
  • AirAir
    Posts: 10,970
    Sure you can. Please use such custom CSS for High DPI screens:
    @media print,
    only screen and (-o-min-device-pixel-ratio: 5/4),
    only screen and (-webkit-min-device-pixel-ratio: 1.25),
    only screen and (min-resolution: 120dpi) {
    	html[lang="fr-FR"] a.sticky-logo{
    		background-image: url(http://192.168.1.2/wordpress/fatmoon/wp-content/uploads/sites/4/2016/02/logo.png);
    	}
    	html[lang="fr-FR"] a.light-logo{
    		background-image: url(http://192.168.1.2/wordpress/fatmoon/wp-content/uploads/sites/4/2016/02/logo.png);
    	}
    }
    With kind regards.
  • Posts: 13
    Hello,

    I canno't test at this time but it's sound like good! :)

    Many thanks to you!

    Bests regards,

    Mario
  • Posts: 13
    Hello!

    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
  • Posts: 13
    I have created a CSS style from example you send me last time, if you can tell me if it's okay or what to use as a better code:

    @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);
    }
    }
  • AirAir
    Posts: 10,970
    Hey :-)

    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
    html[lang="fr-FR"] a.sticky-logo{
    background-image: url(/wp-content/uploads/2019/06/navanex_fr_c.png);
    }
    Use something like this
    html[lang="fr-FR"] a.sticky-logo{
    background-image: url(http://navanex.ca/wp-content/uploads/2019/06/navanex_fr_c.png);
    }
    Other parts look good.

    Looks like you have made it without my help :-) Nice!

    With kind regards.
  • Posts: 13
    Many thanks for your tricks and support! ;)

    My best regards,

    Mario
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!