Skip Navigation

Home › Support › English Support › [Resolved] Split: Show flag for current language and flag & text for dropdown on language switcher

[Resolved] Split: Show flag for current language and flag & text for dropdown on language switcher

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client wanted to display the language text next to the flag in the main menu only after clicking the flag to show the submenu.
Solution:
We suggested the following steps:
1. Navigate to WPML -> Languages -> Menu language switcher.
2. Adjust the language switcher settings to show the names of the languages by clicking on the pencil icon.
3. Add the following CSS code to the style.css file in the root folder of the website's theme:

.wpml-ls-current-language .wpml-ls-flag + .wpml-ls-display { display: none;}

If that does not work, we recommended trying to target the current language menu and the sub-menu items separately with this CSS:

.gp-nav .menu li a .wpml-ls-display{ display: none; } .gp-nav .menu li .sub-menu li a .wpml-ls-display{ display: inline-block; }

Please note that the solution provided might be outdated or not applicable to your case. If the issue persists, we highly recommend checking the related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If you still need assistance, please open a new support ticket.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic is split from https://wpml.org/forums/topic/switching-to-french-does-not-stay-on-the-post/

This topic contains 3 replies, has 2 voices.

Last updated by Marsel Nikolli 9 months ago.

Assisted by: Marsel Nikolli.

Author Posts
March 6, 2024 at 1:40 pm #15379678

karelV-8

Hello, this is not about the menu. Yes I know, the menu is not yet fully translated but we are testing first of all if it is worth having French posts at all.

But this is not answering the main issue. If you go here hidden link then you can switch to Spanish and the translated post loads up. But not with the French version.

Also, is it somehow possible to show the text of the language when you click the flag in the main menu? There are only flags, no text. And, I don't want to have the text there all the time. ONLY when you click it and the flags submenu shows up. Then there should be English, Spanish etc...

Thanks,
Karel
March 6, 2024 at 1:59 pm #15379800

Marsel Nikolli

To be able to achieve what you asked, might require some CSS custom coding, which is out of the scope of the support forum, but I will do my best to guide you in finding a solution.

Could you please follow these steps and let me know if it works out:
- go to WPML -> Languages -> Menu language switcher
- change the settings of the language switcher to show the names of the languages by clicking on the pencil icon

After, try adding the following CSS code to your style.css file on the root folder of your website's theme:


.wpml-ls-current-language .wpml-ls-flag + .wpml-ls-display {
    display: none;
}

Let me know if that works out,
Marsel
March 6, 2024 at 2:16 pm #15379952

karelV-8

Hello, that does not work. You use the same class for both current languages and the ones from the submenu. So you hide either all of them or nothing...

1.png
March 6, 2024 at 3:33 pm #15380508

Marsel Nikolli

Could you please try targeting the current language menu and the sub-menu items separately?

.gp-nav .menu li a .wpml-ls-display{
display: none;
}

.gp-nav .menu li .sub-menu li a .wpml-ls-display{
display: inline-block;
}

That should target the language switcher set on your website's menu.

Let me know if it works out for you,
Marsel
March 7, 2024 at 9:28 am #15382969

karelV-8

Yeah, that works. Thanks.