This thread is resolved. Here is a description of the problem and solution.
Problem:
If you're experiencing an issue where the language switcher is overlapping with menu items on your homepage, this can be adjusted with some CSS modifications.
Solution:
We recommend that you add custom CSS to fix the position of the language switcher. You can find guidance on how to do this in our documentation:
Please note that the solution provided might be irrelevant if it's outdated or not applicable to your case. If the issue persists, we highly recommend checking the related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If you still need assistance, please open a new support ticket.
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 8 months, 2 weeks ago.
Assisted by: Waqas Bin Hasan.
 |
|
 Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00) |
Hi, Thank you for contacting the support. You can fix language switcher design issues by manipulating CSS. Here are some example guides to give you an idea: - https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/ As per you description, you may need to change the value of "top" property of "#colibri .colibri-language-switcher" CSS class in your styles (see attached), for example. Regards.  |
|
|
|
|
Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00) |
Go to your theme customizer and then browse to the CSS or Additional CSS section. In that section, if there's an existing CSS mentioning about #colibri .colibri-language-switcher, then look for the "top" property and change it to 10px (currently it is 80px). If you don't find one there, simply add the following in that section:
#colibri .colibri-language-switcher {
top: 10px !important;
}
The customizer can be found usually in Appearance -> Customize and when it is loaded, you can find "Additional CSS" at the end of the available options (see attached).  |
|
|
