This thread is resolved. Here is a description of the problem and solution.
Problem:
The client is using the [wpml_language_selector_widget] shortcode to place a language switcher on their site and wants to increase the space between the languages in the dropdown list. The padding CSS property is not providing the desired effect.
Solution:
We recommend adding custom CSS to target the language switcher items directly. Here is the CSS code that should be added to the custom CSS section of the theme:
.wpml-ls-statics-shortcode_actions a {
padding-top: 18px !important;
padding-bottom: 18px !important;
padding-left: 15px !important;
}
This code will add more space between the dropdown items. For more information on styling the language switcher, please refer to our documentation: How to fix styling and CSS issues for the language switchers.
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 1 year, 12 months ago.
Assisted by: Noman.
 |
Hello, .wpml-ls {  |
 WPML Supporter since 06/2016 Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00) |
Hi, Thank you for contacting WPML Support. I’ve tried to visit your site but it seems your site is coming soon mode that’s why I can’t see the language switcher. I just added the WPML language switcher with the [wpml_language_selector_widget] shortcode on my test site and I’m able to add the space between items by using the below CSS:
.wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu a {
padding: 20px 5px;
}
In the custom CSS section of the theme and now it looks as in the attached screenshot. Could you please try to use the above CSS and see if this resolves your issue. Here is my test site link: hidden link Here is a doc for more details: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/ If the issue still persists, could you please try to disable the coming soon mode for a moment so that I can access to your site and provide you with correct CSS according to your site. Thank you  |
|
|
Hello, thank you for the code. It helped to increase the space between languages, but I also need to increase the padding top and bottom of the first item so it would look the same size as the sub-menu items. Also some padding to the left. I have enabled the site.  |
|
WPML Supporter since 06/2016 Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00) |
Thanks for enabling the site. Can you please replace my previous CSS with this one:
.wpml-ls-statics-shortcode_actions a {
padding-top: 18px !important;
padding-bottom: 18px !important;
padding-left: 15px !important;
}
And it will look as in the attached screenshot. You may update the CSS values 18px/15px to any number according to your needs. Please let me know if this resolves your issue or if you need further assistance with this issue. Thank you  |
|
|
