adjust wpml language switcher width in menu in header with theme Astra

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

Problem:
The client wants to adjust the width of the WPML language switcher dropdown in the menu.

Solution:
The language switcher dropdown takes formatting from the current theme to make the language switcher style consistent with the current theme menu. You may ask your theme author to fix this issue for you or you may try the below CSS to override the theme CSS:

.wpml-ls-item ul.sub-menu {
    width: auto !important;
}

Relevant Documentation:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/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.

Tagged: Exception

This topic contains 2 replies, has 2 voices.

Last updated by haiboZ 1 year, 8 months ago.

Assisted by: Noman.

Author	Posts
May 23, 2023 at 9:24 am #13696311
haiboZ	hello, i want to adjust the width of wpml language switcher in menu in header. It's too wide. I use theme Astra, not Astra pro. I have read the following article and tried the additional CSS in article, but it didn't work. https://wpml.org/forums/topic/change-width-of-language-switcher-make-flags-rounder/ is there any solution for me? Thx. best regards
May 23, 2023 at 10:54 am #13697473
Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	Hi, Thank you for contacting WPML Support. The language switcher dropdown takes formatting from the current theme to make the language switcher style consistent with the current theme menu and the current theme has set the dropdown width to 409px as you can see in the attached screenshot. You may ask your theme author to fix this issue for you or you can try the below CSS to override the theme CSS: .wpml-ls-item ul.sub-menu { width: auto !important; } And it will look as in the attached screenshot. You may adjust the width by changing the auto to 130px or any number according to your needs. Could you please check and confirm? Thank you