Change colors of language switcher does not work

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 11 replies, has 3 voices.

Last updated by michelleC-5 4 years, 6 months ago.

Assisted by: Riffaz.

Author	Posts
February 8, 2021 at 12:15 pm #8031685
michelleC-5	I am trying to: Change the colors of the language switcher Link to a page where the issue can be seen:hidden link I expected to see: when hovering the "local language", the "other languages" will be shown in white words with a black background. When hovering "other language", the selected language will be in orange words with a black background. Even I tried the CSS available in another thread in the forum, the issue cannot be fixed. Instead, I got: when hovering the "local language", the "other languages" will be shown in black words with a black background. When hovering "other language", the selected language will be in green words with a grey background
February 8, 2021 at 2:14 pm #8033375
Sumit Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)	Hi, Thank you for contacting the support forum. Before your ticket is assigned to one of my colleagues, please allow me to walk you through some initial debugging steps. This will help speed up the support process. Before suggesting CSS changes I want to ask you if you have tried color options in Language Switcher setting? Please see this article and scroll to "Full control over each language switcher" https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#full-control-over-each-language-switcher Thanks
February 9, 2021 at 2:19 am #8036705
michelleC-5	Yes. I have. Please assign a ticket.
February 9, 2021 at 2:53 am #8036863
Riffaz	Hi, Could you please let us know the folder protection username and password? So we can check what is overriding your color settings. The next reply is private. Regards, Riffaz.
February 9, 2021 at 5:10 am #8037779
Riffaz	Hi, Please check the attached screenshot. Are we discussing the backup or css style for language switcher here? Regards,
February 9, 2021 at 8:49 am #8038709
Riffaz	HI, Please check the attached screenshot. Could you please double check the credentials ? Regards,
February 10, 2021 at 4:21 am #8047931
Riffaz	Hi, Add this css code to WPML > Languages > Language switcher options > custom css .wpml-ls-menu-item a span { color: #fff; } This will make dropdown menu text color to white (like the attached image). Change the color code to the color you want. After making this change, please clear your all type of cache (browser, site, server, plugin) Then check the issue in incognito mode. Regards,
February 10, 2021 at 12:02 pm #8051265
michelleC-5	There are still 2 issues after clearing the cache on browser, server, plugin. (1) The "Hover" background is white. I want black. (2) When show the "About Us" page on "Edge", the page does not have the switcher function. Image attached. Btw, how to clear the cache on site?
February 11, 2021 at 3:55 am #8057437
Riffaz	Hi, These color behavior is not influenced by the WPML. Your elementor settings are overriding the default wpml switcher settings (attached screenshot). If you disable the Elementor you can see your WPML switcher color setting will work fine. Anyhow, add this code as well. .elementor-1911 .elementor-element.elementor-element-778643fe .elementor-nav-menu--dropdown a:hover { background-color: #000; } this will make the hover background color black. And, for me this work fine as expected in both firfox and edge. Please add a dummy sub menu item to your home or about us or any menu item. You will see the same issue with that sub menu as well. So you can easily understand that this issue is not caused by the WPML. Regards,
February 11, 2021 at 8:27 am #8058611
michelleC-5	Added the code as required. And I used a new pc to view. The same issue is still existing: when hover, the text is on white background. I know WPML can work alone well, yet we have to use Elementor to build the website. Would you please try and look at it for us? Thanks much.
February 11, 2021 at 11:06 am #8060241
Riffaz	Hi, Remove the previous code and add this code .elementor-1911 .elementor-element.elementor-element-778643fe .elementor-nav-menu--dropdown a:hover { background-color: #000 !important; } Your elementor is nesting the style very strongly. So I added !important tag to overcome that and it works. I tested it on your site source code. Regards,