Skip Navigation

Home › Support › English Support › [Resolved] Language Switcher CSS & Mobile?

[Resolved] Language Switcher CSS & Mobile?

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

Problem:
Customizing and styling Language Switcher.

Solution:
WPML language switcher provides basic/necessary styling and acts like a bare-bone to suit custom styling and needs. Since not every theme has the same design, you can always customize the appearance to your needs.

Please see following guides for more information.

Relevant Documentation:
- https://wpml.org/documentation/getting-started-guide/language-setup/#id3
- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/
- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/
- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-switcher/

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 Waqas Bin Hasan 1 year, 4 months ago.

Assisted by: Waqas Bin Hasan.

Author Posts
July 11, 2023 at 7:13 pm #14017731

tannerT

I am shocked at the limitations on the Language Switcher:

1.) Shortcode Display for Menu (FLAG + "EN"): hidden link

Can you please confirm this is NOT an option? Can you please request this AS an option. Right now I am compensating with this CSS:

.header li.wpml-ls-first-item {
border-radius: 10px;
border:1px solid gray;
padding: 0% 2% 0% 2%;
}

.nav-top-link .wpml-ls-native {
font-size: 0;
padding: 8% 0% 0% 0%;
color: gray;
line-height: 10px;
}

.nav-top-link .wpml-ls-native::after {
content: attr(lang);
font-size: 15px;
}

2.) Mobile Language Switcher Option (Reverse Dropdown to DropUp). For our mobile site, we typically place the language switcher in the bottom left corner of every page: hidden link

This is NOT "necessarily" possible as the dropdown will open beneath the viewport. We have compensated by moving the fixed position on hover (tap):
#lanswitch-footer:hover {
bottom: 40px;
}
}

Would love to hear your comments and see these get integrated
July 12, 2023 at 8:52 am #14020929

Waqas Bin Hasan
Supporter

Languages: English (English )

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

Hi,

Thank you for contacting the support.

WPML language switcher provides basic/necessary styling and acts like a bare-bone to suit custom styling and needs. Since not every theme has the same design, you can always customize the appearance to your needs - just like you did.

In short, that's the correct way to fix the language switcher. Please see following guides for more information:

- https://wpml.org/documentation/getting-started-guide/language-setup/#id3
- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/
- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/
- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-switcher/

Regards.
July 14, 2023 at 12:50 am #14036963

tannerT

Some more default options, especially for mobile would be appreciated. Additionally, styling outside simple text/background color as well