This thread is resolved. Here is a description of the problem and solution.
Problem:
The client is trying to customize the language switcher to use an icon and display languages below the icon but is unable to add the image/icon in CSS.
Solution:
We recommend using the CSS background property to display the icon in the language switcher. Here is an example of CSS that can be used:
.wpml-ls-current-language.menu-item-has-children {<br /> background: url('https://awesome-hang.sandbox.otgs.work/wp-content/uploads/2024/09/globe.png');<br /> font-size: 0;<br /> min-height: 50px;<br /> min-width: 50px;<br />}<br /><br />.wpml-ls-current-language.menu-item-has-children > a > img,<br />.wpml-ls-current-language.menu-item-has-children > a:first-child:after {<br /> display: none;<br />}You can customize this CSS as needed. For more details on CSS issues with language switchers, visit How to Fix Styling and CSS Issues for the Language Switchers.
If this solution does not resolve your issue, please provide a debug report in the Debug Information box. You can find instructions on how to do this here: Provide Debug Information for Faster Support.
If the solution provided here is not relevant due to being outdated or not applicable to your case, 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 issues persist, 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.
Our next available supporter will start replying to tickets in about 11.45 hours from now. Thank you for your understanding.
This topic contains 4 replies, has 2 voices.
Last updated by 2 months, 1 week ago.
Assisted by: Noman.
 |
|
 Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00) |
Hi, Thank you for contacting WPML Support. You may use CSS background property to display the icon in the language switcher as you can see in the attached screenshots. Here is an example CSS which I used to display the icon in the menu:
.wpml-ls-current-language.menu-item-has-children {
background: url(<em><u>hidden link</u></em>);
font-size: 0;
min-height: 50px;
min-width: 50px;
}
.wpml-ls-current-language.menu-item-has-children > a > img,
.wpml-ls-current-language.menu-item-has-children>a:first-child:after {
display: none;
}
.sub-menu {
margin-top: 38px
}
You may customise it according to your needs. Here is the demo site link: Here is a doc for more details: - If the above steps don’t help, please add the debug report in the Debug Information box. I have also enabled debug info box for your next reply: https://wpml.org/faq/provide-debug-information-faster-support/ Please understand that I'm helping you here with an issue that is out of the scope of our support forum and we will not be able to support the fix that we give you in the future. Because the theme or our code might have changed, so please always be aware of this. Right now it's working without any issue. Thank you   |
|
Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00) |
Thanks for trying the above suggested steps and providing access to your site. I’ve updated the CSS classes in the WPML >> Languages > Additional CSS section according to the theme switcher and now it looks as in the attached screenshot. Please let me know if this resolves the issue or if you need further assistance with this issue. Thank you   |
|
|
|
|
Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00) |
