Replicate WPML Website Language Switcher

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

Problem:
The client wants to replicate the WPML Website Language Switcher styling and behavior on their website, specifically addressing the issue of excessive space on the right of the flags in the language switcher.
Solution:
We recommended the client to apply custom CSS to adjust the styling of the language switcher. Here are the steps and the code provided:

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {
    display:none!important;
}
 
.wpml-ls-legacy-dropdown {
    width: 40px!important;
}
 
.wpml-ls-legacy-dropdown a {
    padding: 5px!important;
}
 
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
    margin: 0 auto!important;
    text-align: center!important;
}

If this solution does not resolve your issue or seems outdated, we highly recommend 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. If further assistance is needed, please open a new support ticket at 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: Custom Work

This topic contains 12 replies, has 0 voices.

Last updated by Fabio Fava 1 week ago.

Assisted by: Kor.

Author	Posts
July 23, 2025 at 8:08 pm #17265512
Fabio Fava	Background of the issue: I am trying to replicate the WPML Website Language Switcher on my website hidden link. I have been looking at various resources on the WPML website to achieve this. Symptoms: The Language Switcher have by default a huge space on the right of the flags. I'd like to replicate (exactly) the WPML Website Language Switcher styling and behaviour for all Language Switchers on my website. Also for the foother, to be added to my Pro Theme (Cornerstone) Footer on my website. Your Language Switchers are the most stylish! Questions: How can I replicate the WPML Website Language Switcher on my website? Both for Header, Footer and Custom Language Switchers.
July 24, 2025 at 12:55 am #17265732
Kor WPML Supporter since 08/2022 Languages: English (English ) Timezone: Asia/Singapore (GMT+08:00)	Thanks for contacting us. I’ve checked your website, and it appears to be in maintenance mode. However, I noticed that a dropdown language switcher is displayed. You can customize its appearance using custom CSS. To do so, navigate to Appearance > Customize > Additional CSS in your WordPress dashboard and insert the following code: .wpml-ls-legacy-dropdown { width: 50px!important; } Let me know if you need help with the specific CSS code or design. DISCLAIMER: Please know that any snippet or code suggested here is for educational purposes only. they are not meant to be the final solution but instead meant to point you in the right direction and are out of the scope of our support so we can't nor will modify, improve, debug or maintain it.
July 24, 2025 at 2:05 am #17265781
Fabio Fava	Hey Kor, Thank you very much, just would need to remove the small arrow. I've selected a non-clicking Dropdown, so it shouldn't have the arrow... Or is there other CSS to remove the small arrow like the WPML website? Also, I've noted that the flag became very small, despite I didn't change anything on that. I'll keep looking forward from you to see if we can mach WPML site's language switcher. Thank you very much and best regards!
July 24, 2025 at 8:46 am #17266493
Kor WPML Supporter since 08/2022 Languages: English (English ) Timezone: Asia/Singapore (GMT+08:00)	Thanks for your reply. You can replace the custom CSS code that I've provided earlier with this one. .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after { display:none!important; } .wpml-ls-legacy-dropdown { width: 40px!important; } .wpml-ls-legacy-dropdown a { padding: 5px!important; } .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle { margin: 0 auto!important; text-align: center!important; }
July 24, 2025 at 2:45 pm #17268260
Fabio Fava	Hey Kor, It seems perfect, i'll just translate one first page this afternoon to make sure the secondary language shows as expected, before closing as resolved. One more detail: I assume I still can change colors using the customizer of WPML, correct? I'll keep you posted this afternoon before we close the ticket. Thank you so much for your precious time and support, brother. Best regards
July 24, 2025 at 2:46 pm #17268265
Kor WPML Supporter since 08/2022 Languages: English (English ) Timezone: Asia/Singapore (GMT+08:00)	Thanks for your reply. What color are you trying to change?
July 24, 2025 at 2:48 pm #17268266
Fabio Fava	I normally use a very light gray. It was more to know if I can still use that customiser, or if using the CSS wil invalidate the colors chosen at the customiser. I'd like to be able to select on the customiser for sure.
July 24, 2025 at 2:51 pm #17268267
Kor WPML Supporter since 08/2022 Languages: English (English ) Timezone: Asia/Singapore (GMT+08:00)	Thanks for your reply. You can change the color using the custom CSS code below. Please use your hex color code that you prefer. .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle { border-color:#000!important; background-color: #ff0f0f!important; }
July 24, 2025 at 2:59 pm #17268318
Fabio Fava	So I assume any color I set on the customiser will NOT work, is that correct? Should I add this last piece at some specific part (beginning or end)? Cheers!
July 24, 2025 at 3:00 pm #17268322
Kor WPML Supporter since 08/2022 Languages: English (English ) Timezone: Asia/Singapore (GMT+08:00)	Thanks for your reply. You can try to use the customizer. If it's not working, then you can use the custom CSS code that I've shared. Add the code at the end.
July 24, 2025 at 5:36 pm #17268875
Fabio Fava	Just to let you know, the WPML customiser colors work! Thank you so much, Kor! You've nailed it once more! All my best regards to you and all the WPML Dev Team & Staff!
July 24, 2025 at 10:08 pm #17269472
Fabio Fava	Hey Kor, I've noted as you can see by the screenshot below, that the secondary language flag is a bit dislocated to the left, not being exactly in the center like on the WPML Website. Would be possible to update that CSS in order to achieve the centered secondary flags? I'll keep looking forward from you on that, thank you very much. Cheers!
July 24, 2025 at 11:03 pm #17269609
Fabio Fava	Also: would be possible in any way to also replicate this on the backend of the site? This would help to aovid clutter on the top menubar. Thanks!
July 25, 2025 at 7:33 am #17270152
Kor WPML Supporter since 08/2022 Languages: English (English ) Timezone: Asia/Singapore (GMT+08:00)	Thanks for your reply. The custom CSS code should reflect the language switcher styling on your Website, no matter where you display it. Please add this custom CSS code to fix the alignment issue. .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a { margin:0 auto; text-align:center; }
July 25, 2025 at 12:54 pm #17271143
Fabio Fava	Hey Kor, Worked like a charm. The first (Comming Soon) page is already online and translated on the 4 languages, all perfect. Thank you so much. I'll now create a first page with Header & Footer, to check the visual glitches I've had before restarting the site from scratch. But that's another ticket. Thank you very very much once more for your always good will to help. All my best regards to you and all the Staff & Dev Team!