Skip Navigation

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

Problem:
The client wanted to change the background color of the active language flag in the mobile menu to make it distinct from the other languages.

Solution:
We recommended adding custom CSS to achieve this. Here are the steps we provided:
1. Navigate to Appearance > Customizer > Custom CSS.
2. Insert the following CSS code:

@media screen and (max-width: 1024px) {<br />.elementor-element.elementor-element-345165c.elementor-hidden-desktop.e-con-full.e-flex.e-con.e-child .wpml-ls-current-language a {<br />background-color: #BB6D00 !important;<br />}<br />}

3. Save the changes.

This CSS snippet targets the active language flag within the mobile menu and applies a specific background color to it.

Please note that this solution might be outdated or not applicable to your case. If it doesn't help, we encourage you to open a new support ticket. We also highly recommend checking related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please contact us in the WPML support forum.

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.

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by Rob Kroos 11 months, 3 weeks ago.

Assisted by: Mihai Apetrei.

Author Posts
February 14, 2024 at 7:53 pm #15304295

Rob Kroos

In my mobile menu I have a list of language flags without text. Would it be possible to give the active flag (language) a different background color? When you switch languages the background color does very briefly change when selected. I would like that background to remain for the active language.

February 14, 2024 at 10:14 pm #15304514

Mihai Apetrei
Supporter

Languages: English (English )

Timezone: Europe/Bucharest (GMT+02:00)

Hi there.

Please go to Appearance > Customizer > Custom CSS > and try the following CSS example and save:


@media screen and (max-width: 1024px) {

.elementor-element.elementor-element-345165c.elementor-hidden-desktop.e-con-full.e-flex.e-con.e-child .wpml-ls-current-language a {

background-color: #BB6D00 !important;

}

}

That should do what you want.

Mihai Apetrei

February 14, 2024 at 11:42 pm #15304601

Rob Kroos

Hi Mihai,

Thanks for your quick response. It worked, although not in Appearance. I did work in WPML > Extra CSS. Can I ask you one more favour? When you look at the screenshots in the attachment on the left it's how it looks now and I would like it to look like the screenshot on the right.

And would it also be possible to round the corners of both the flags and the background a little bit?

3032.png
February 15, 2024 at 11:23 am #15306618

Rob Kroos

I managed to figure out the last request myself.