Skip Navigation

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

Problem:
The client has almost 20 languages on a page and he was using menu language switcher. When someone has a small screen they cannot see all languages to choose from. So, he wants to split the language switcher into two or three separate columns.

Solution:
You can fix this issue by adding the following CSS in your theme’s or child theme style.css file OR Custom CSS section of the theme:

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

And it will look as in the attached screenshot: https://cdn.wpml.org/wp-content/uploads/2019/11/4960603-switcher_2_columns.png

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.

This topic contains 4 replies, has 3 voices.

Last updated by Noman 4 years, 2 months ago.

Assisted by: Noman.

Author Posts
November 15, 2019 at 5:43 pm #4955981

LukaszA

I have almost 20 languages on page and I use menu language switcher. When someone has small screen he cannot see all languages to choose from. I want to split language switcher into two or three separate columns. How can i do that?

You can see problem live on my webpage.

November 17, 2019 at 5:09 pm #4960603

Noman
Supporter

Languages: English (English )

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

Hi,

Thank you for contacting WPML Support. You can fix this issue by adding the following CSS in your theme’s or child theme style.css file OR Custom CSS section of the theme:

.drop_down .narrow.wpml-ls-item .second .inner ul {
    width: 300px !important;
}

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

And it will look as in the attached screenshot.

Thank you

switcher 2 columns.png
November 17, 2019 at 7:54 pm #4961027

LukaszA

Great help! Thank you man, works perfect.

February 8, 2020 at 7:57 pm #5453643

raniS-2

Hi,
I need to split language switcher into three separate columns, and tried the solution provided here, but it did not work.

I would be happy for your help on the matter.

Best regards,
Rani

February 9, 2020 at 6:40 am #5455411

Noman
Supporter

Languages: English (English )

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

@ranis-2 I have replied you on the new ticket you have created. Thanks

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.