Please make sure to update to WPML 4.3.6 and check our list of Known Issues before reporting

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 thread is resolved. Here is a description of the problem and solution.

Problem:
Vertical language switcher not displaying.
Solution:
Add the following CSS in Appearance >> Customize >> Additional CSS section:

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

Relevant Documentation:

This topic contains 4 replies, has 2 voices.

Last updated by Cara Mc Donough 1 year, 12 months ago.

Assigned support staff: Noman.

Author Posts
February 20, 2018 at 3:45 pm

Cara Mc Donough

I've had this issue before. Site has since changed and CSS code provided not resolving the issue. I have selected the "Vertical List" to display just the flags, no text, the same as listed in the Custom Language Switches section. I've attached a screenshot.

I have also attached a screenshot of the result...which is a drop-down instead of vertical list and the 2nd flag is displayed top-left, instead of straight under the 1st flag.?

I have provided you with my Admin details. Perhaps there is a CSS conflict? Hoping this is a quick fix.

Really appreciate your assistance on this.

Many thanks

February 21, 2018 at 7:46 am #1524482

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Cara,

Thank you for contacting WPML Support. I have fixed the issue by adding following CSS in Appearance >> Customize >> Additional CSS section:

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

And now it looks as in attached screenshot.

Thank you

February 21, 2018 at 7:58 am #1524501

Cara Mc Donough

Hi Norman,
Many thanks for your help and for the CSS code.
Looking good, but still issues with alignment.
As you can see in the attached, the flags are not listed correctly underneath each other.
I've tried using "margin" and "vertical-align" with and without "!important", but not working.
Any ideas?
Appreciate your help.

Thanks again,
Cara

February 21, 2018 at 8:47 am #1524548

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

I have fixed the issue by usin following CSS in Appearance >> Customize >> Additional CSS section:

.wpml-ls-item .sub-menu {
    min-width: auto !important;
    top: auto !important;
   right: auto !important;
   left: -10px !important;
}

And now it looks as in attached screenshot.

Thank you

February 21, 2018 at 9:12 am #1524583

Cara Mc Donough

Thanks Norman. Tweaked the left margin a little and also added more CSS for mobile, as alignment was out. All working great now. Please close the ticket. Thanks for your help.