Skip Navigation

Home › Support › English Support › [Resolved] Split language switcher into 2 columns

[Resolved] Split language switcher into 2 columns

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

Problem:
The client needed to split the language switcher into two columns, but the CSS code that worked in 2019 was no longer effective due to changes in the code.
Solution:
We recommended the following CSS to split the language switcher dropdown items into two columns:

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
    width: 140px;
}
 
.wpml-ls-legacy-dropdown ul ul .wpml-ls-item {
    float: left;
    width: 70px
}

We also provided a screenshot to show how it would look and directed the client to our documentation for more details on fixing styling and CSS issues for language switchers:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/

If this solution does not apply to your case, or if it seems outdated, we encourage you to check the related known issues at https://wpml.org/known-issues/, verify the version of the permanent fix, and confirm that you have installed the latest versions of themes and plugins. Should you need further assistance, please do not hesitate to open a new support ticket in our forum: https://wpml.org/forums/forum/english-support/.

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: 

This topic contains 1 reply, has 2 voices.

Last updated by Noman 3 years, 3 months ago.

Assisted by: Noman.

Author Posts
March 21, 2022 at 1:25 pm #10838271

clausR-2

I would like to Split language switcher into 2 columns
This ticket has been previously solved in 2019 in another ticket but code has changed and now the same CSS is not working anymore.
.drop_down .narrow.wpml-ls-item .second .inner ul {
width: 300px !important;
}

.drop_down .narrow.wpml-ls-item .second .inner ul li {
width: 150px !important;
float: left !important;
}

I need a recommendation on how to split this menu with the current CSS classes.
March 22, 2022 at 8:37 am #10844163

Noman
WPML Supporter since 06/2016

Languages: English (English )

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

Hi,

Thank you for contacting WPML Support. You can split language switcher dropdown items in 2 columns by using below CSS:

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
    width: 140px;
}

.wpml-ls-legacy-dropdown ul ul .wpml-ls-item {
    float: left;
	width: 70px
}

And it will look as in the attached screenshot.

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/

Thank you

split switcher.jpg