Need help with multilingual header logo and polylang

Hello,

Can you please post a link to your site so that I can take a look at this?

thanks,
Kevin

Sorry! The website is https://www.voedingscoachbrenda.nl.

Thank you!
Brenda

I’m not very familiar with the configuration of polylang, but you should be able to swap the image out with this CSS:

.kt-header-position-above #logo a .ascend-logo:lang(en-US), .kt-header-position-above #logo a .ascend-trans-logo:lang(en-US) {
    content: url("https://voedingscoachbrenda.nl/wp-content/uploads/apples-1.jpg");
}

Just replace the URL with your logo, and you should be set.

Let me know if you need anymore assistance.

-Kevin

Hi Kevin,
Thank you for trying to help. I uploaded the css with my logo url in it, but unfortunately nothing happened. Still the Dutch logo. ??
I even tested it by disabling my sticky header, in case that is the problem, but nope…
Any other ideas?

Hi Brenda,
Where are you adding the css? Have you tried clearing your cache after adding it?

Hannah

Hi Hannah,
I have cleared my cache as suggested and added the css in both fields where I can add css.
First I can add it under:Customizer -> Extra CSS
Second I can add it under: Theme options -> Custom CSS

I have added css in these fields before and both were successfully executed. Weirdly enough if I add CSS in either of these windows, it does not show up in the other. I have not yet tried adding the css directly in the css under my child theme via ftp.

I have added the url of the english logo into the url field, as it shows up in my media librabry, thus: “https://voedingscoachbrenda.nl/wp-content/uploads/Logo_ENfull2-1.jpg”.

I do not know if the code is just not working or if I am doing something else wrong.
I even changed the code from EN-US to EN_US as that is how it is recorded in my polylang settings. Nothing.

Perhaps I could add an !important in there somewhere to override Ascend?

Thanks for thinking with me.

Try adding !important to the CSS, like this:

.kt-header-position-above #logo a .ascend-logo:lang(en-US), .kt-header-position-above #logo a .ascend-trans-logo:lang(en-US) {
    content: url("https://voedingscoachbrenda.nl/wp-content/uploads/Logo_ENfull2-1.jpg") !important;
}

Let me know if that works for you.

-Kevin

Unfortunately, that does not work either.

Can you take your site out of maintenance mode so that I can test more CSS?

-Kevin

The website is available now.

Odd, the CSS works when I’m inspecting the page, but not when added to your custom css. I’ve sent this thread to the theme developer so that he can provide a solution.

-Kevin

Hey @purplepuree123,

Here is a css hack for the logo:

html[lang='en-US'] .kt-header-position-above #logo a .ascend-logo, html[lang='en-US'] .kt-header-position-above #logo a .ascend-trans-logo {
    content: url("https://voedingscoachbrenda.nl/wp-content/uploads/Logo_ENfull2-1.jpg");
}

Just add that in your theme options > custom css and remove the other css.

Images for the basic sliders don’t show up in the string translations but the caption text does. There you can add text on top of the image which is better for SEO and that would be translatable. But with your style that may not be an option.

So I will suggest adding a plugin like: https://www.ads-software.com/plugins/smart-slider-3/

Then you can build two different sliders. One with your English slides and one with dutch.

Then at the top of your page content, you can add the dutch slider shortcode for your dutch page and English slider shortcode for English page. That would then allow you to turn off the theme options slider.

I hope that helps and clarifies.

The premium theme has other slider options and the ability to add a basic slider into the page content so you could make two simple sliders for each language that way.

Ben

Hi Ben,
Thank you for taking the time to help me and thank you for clarifying about the sliders. I was going to tackle that problem next, but your advice is really helpful.

Unfortunately the css you provided does not work.

I was thinking that perhaps it would make a difference if I assigned the English logo to the Dutch language, but that does not change anything either. In Polylang, you can assign each image to a language in the image bank. But it doesn’t matter to which language I assign it. This multi-lingual site is driving me nuts.

Either way, I really appreciate you all looking at it for me.

Thanks,
Brenda

Hey,

It looks like you’ve changed the CSS a bit. The selector for the language that’s in your custom CSS box is using an underscore instead of a dash. Be sure to copy it exactly like this from the forum:

html[lang='en-US'] .kt-header-position-above #logo a .ascend-logo, html[lang='en-US'] .kt-header-position-above #logo a .ascend-trans-logo {
    content: url("https://voedingscoachbrenda.nl/wp-content/uploads/Logo_ENfull2-1.jpg");
}

Try adding this CSS and it should work.

-Kevin

Hi Kevin,
I did. I tried it both ways and just left the last attempt in there I guess. Neither us-en nor us_en work.