Skip Navigation

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

Problem:
The client wanted to customize the WPML language switcher to have no border, a transparent background, a reduced width, and to remove the dropdown arrow, similar to the switcher on the WPML homepage.

Solution:
To achieve the desired styling for the language switcher, we provided the following CSS code:

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
	border-width: 0px;
    background-color: transparent;

}

.wpml-ls-legacy-dropdown {
    width: 11em;
}

This code can be added to the theme's CSS file or within the WPML theme customizer in the additional CSS section.

To remove the dropdown arrow, we suggested using the following CSS:

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after{
	display: none;
}

We also provided links to our documentation for further customization guidance:

If the provided solution does not apply or is outdated, or if you have a different case, we recommend opening a new support ticket. We highly suggest checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins.

For further assistance, please visit our support forum: 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.

This topic contains 3 replies, has 2 voices.

Last updated by Mateus Getulio 10 months, 1 week ago.

Assisted by: Mateus Getulio.

Author Posts
April 5, 2024 at 12:54 pm #15488243

haiboZ

Hi,

I find a solution for my last ticket "language switch in header not displayed as dropdown style".

I added the switcher at above header using widget and shortcode "[wpml_language_selector_widget]" instead of option from Astra and it works now in dropdown style.

hidden link

Now I want adding some CSS code to make lt looks better. such as zero borderline and auto width. It's too wide. I want it Just like the switcher which your WPML home page did.

but I don't have the selector for CSS.

Can you please help? Thanks.

BR

2024-04-05_20-41-13.jpg
2024-04-05_20-41-13.jpg
April 5, 2024 at 9:14 pm #15489900

Mateus Getulio
Supporter

Languages: English (English ) Portuguese (Brazil) (Português )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello there,

I was able to select the language switcher and remove the border, background and reduce its size with the following css code:

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
	border-width: 0px;
    background-color: transparent;

}

.wpml-ls-legacy-dropdown {
    width: 11em;
}

You can add it to your theme's css file or inside the wp-admin theme customizer in the additional css section.

Please note: the code provided is to be used as an informational one. remember that custom coding, even css, is out of the scope of our support so we can't create, debug or modify code for you and it's your responsibility to maintain it. we hope the one we used as an example could point you in the right direction.

Please check our documentation on how to customize language switchers:

https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-switcher/#the-styling-part
https://wpml.org/documentation/getting-started-guide/language-setup/#language-switcher

Please give it a try and let us know if you still have doubts.

Kind regards,
Mateus

April 6, 2024 at 2:07 pm #15490650

haiboZ

Hi Mateus,

thanks very much for help.

Is that possible to remove this down arrow? I've tried to disable it. but no success.

thanks in advance.

2024-04-06_22-06-46.jpg
April 8, 2024 at 11:14 am #15493844

Mateus Getulio
Supporter

Languages: English (English ) Portuguese (Brazil) (Português )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello there,

Can you try to use the following code to hide the arrow?

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after{
	display: none;
}

Thank you, please give it a try.
Mateus

April 9, 2024 at 1:17 pm #15499371

haiboZ

great support!