Different Global Headers depending on language

Support
#1

Hi. I’m using WPML.

  • For Spanish, I want to use as Global header: yellow-power+logo (call-me-added2smaller-devices-only)
  • For English, I want to use as Global header: yellow-power+logo

I’ve tried to accomplish that by playing with the flags shown in the Headers editor, but when I click on Make it Global, it seems it’s changed for both languages:

https://www.edinventa.com/pro/#/headers?lang=es

Is it possible to use different Global headers depending on language? If so, how?

Thanks

Carlos

#2

Hi Carlos,

Thanks for reaching out.

It’s not possible, it works the same as pages and posts, it automatically switches to the translated page.

But based on your screenshot and provided information, it seems to have the same yellow-power+logo, except all-me-added2smaller-devices-only. In that case, you can just use the same header and just delete the content present in all-me-added2smaller-devices-only from English translation of the header.

I’m not sure why it needs different header when you can alter the content of the translated version of that existing header. Or maybe I just missed something, please provide more details if you have issues with header translations.

Thanks!

#3

Deleting translated content is not a good idea because users will see a big yellow area EMPTY on the top. Any other idea? :confused:

Thanks

Carlos

PS: being able to do it is a feature request for me… hehe

#4

Hi @educainventions,

May I know which big yellow empty area? The header bar is configured with height and you may use it to narrow down the height. Would you mind providing a video recording then I’ll try to reproduce it on my installation?

I’ll add it as a bug or feature request once I verify the issue.

Thanks!

#5

The big yellow empty area is the one shown below (notice is not empty in the picture, but if I remove the text, it will be empty):

Thanks

Carlos

#6

Hello Carlos,

Please edit your header and in the bar settings where it contains the text element, add a custom ID my-bar. And then in the custom css section of the header, you can add this:

html[lang="en"] #mybar {
  display: none !important;
}

This code should hide the bar when viewing the English page.

Hope this would work out for you.

1 Like
#7

It does not work. The code I’m using is:

html[lang="en"] #header-yellow-bar-call-me-mobile-only {
  display: none !important;
}

I’ve tried adding the ID to Bar 2, I did another attempt adding it to Container 1, and another one adding it to Text 1:

I’ve search on the source code for #header-yellow-bar-call-me-mobile-only, but it’s not found on the html code of the English version: https://www.edinventa.com/en/heromask-foreign-languages/

However, the code #header-yellow-bar-call-me-mobile-only IS on the Spanish version of that page: https://www.edinventa.com/heromask-idiomas-regalo-original-para-ninos-5-6-7-8-9-10-11-12-anos/

I think that’s the root of the issue.

Thanks so much for your help :slight_smile:

Carlos

#8

Hi @educainventions,

I checked and you didn’t add the custom ID to your header bar as Ruenel suggested. I went ahead and applied it all :slight_smile:

And the correct CSS is this, but just a note, it’s not working in the builder’s preview, but works on actual page. So please check the live page.

html[lang="en-US"] #header-yellow-bar-call-me-mobile-only {
  display: none !important;
}

But I still don’t get it, why not just remove the entire header bar since it’s also hidden on desktop for English, and now you wish to hide it on mobile for English too.

Doing that should have no effect to the bars of the Spanish version of the header.

Thanks!

#9

It’s working!!! Thanks so much one more time :slight_smile: :slight_smile:

I was not working because I added the ID to the Spanish bar, not the English bar! Also, the CSS was lang="en", not lang="en-US" as you pointed out.

And yes, as bars can be different according to the language (I didn’t know that), I guess I also could just delete it.

Thanks so much :slight_smile:

Carlos

#10

You’re most welcome Carlos!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.