Skip Navigation

Home › Support › English Support › [Resolved] Language switcher doesn’t show correctly

[Resolved] Language switcher doesn’t show correctly

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

Problem:
I am trying to setup a custom language switcher as the one on the screenshot. I have tried to style it, but I can't find the right CSS classes and IDs:
https://cdn.wpml.org/wp-content/uploads/2018/09/2767441-lang_switcher.JPG

Solution:
I have solved this issue by adding following CSS in WPML >> Languages >> Language switcher options >> Additional CSS section:

.wpml-ls-legacy-dropdown {
    width: auto;
}
.top-area .top-area-block.top-area-menu .wpml-ls-item {
    font-size: 14px;
}

.wpml-ls-legacy-dropdown .wpml-ls-flag {
    width: 18px !important;
    height: 12px !important;
}

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 5 replies, has 2 voices.

Last updated by sorenH-9 2 years, 3 months ago.

Assigned support staff: Noman.

Author Posts
September 26, 2018 at 1:20 pm

sorenH-9

I am trying to: Set up a custom language switcher as the one on the screenshot. I have tried to style it, but I can't find the right CSS classes and IDs.

Link to a page where the issue can be seen: hidden link

I expected to see: A switcher like one from the preview.

Instead, I got: A switcher without language-names and dropdown arrow.

lang-switcher.JPG
lang-switcher.JPG
how-it-looks.JPG
how-it-looks.JPG
September 27, 2018 at 4:12 pm #2771204

Noman
Supporter

Languages: English (English )

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

Hi,

Thank you for contacting WPML Support. I have noticed that your website’s WP Memory Limit is 40MB. The WP memory limit needs to be increased, it's different than php memory. PHP memory is fine but WordPress uses 40MB as default in your site. Minimum requirements for WPML are 128Mb: https://wpml.org/home/minimum-requirements/

- Please add this to the top of wp-config.php to increase WP memory:

/* WP Memory Limit */
define('WP_MEMORY_LIMIT', '256M');
define( 'WP_MAX_MEMORY_LIMIT', '256M' );

- Please clear all sort of caches in your site plugin cache ( WP Fastest Cache) / CDN cache (LiteSpeed) / browser cache and then see if it resolves the issue afterwards.

- Please check for a possible theme and plugin conflict. To do that you need to backup your site and switch back to any default theme (e.g. Twenty Sixteen theme), Disable all plugins except WPML and see if this issue goes away with default theme and only WPML activated?

If issue still persists, please provide temporary access (WP-Admin) to your site, so that I can look into your setup and debug the issue.

=== Please backup your database and website ===

Your next answer will be private which means only you and I have access to it.

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

Thank you

September 28, 2018 at 10:50 am
September 28, 2018 at 11:58 am #2773649

Noman
Supporter

Languages: English (English )

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

Hi,

I have solved this issue by adding following CSS:

.wpml-ls-legacy-dropdown {
    width: auto;
}
.top-area .top-area-block.top-area-menu .wpml-ls-item {
    font-size: 14px;
}

.wpml-ls-legacy-dropdown .wpml-ls-flag {
    width: 18px !important;
    height: 12px !important;
}

in WPML >> Languages >> Language switcher options > Additional CSS section and now it looks as in attached screenshot. Could you please check and confirm?

Thank you

language switcher dropdown.png
language switcher dropdown.png
September 28, 2018 at 1:25 pm #2773985
sorenH-9

Hi Norman,

That solved my issue! Thank you 🙂

One more thing...
On mobile, when I open the dropdown it is not possible to close the dropdown by clikcing on the already chosen language or the arrow.
I can only close it by clicking another place on the site or by choosing a different language.
Is it possible to config the behavior of the dropdown, so it close when I click on the arrow or the already chosen language? Hope you understand what I mean.

If you take a look on my attached image. Imagine it is on a mobile. I expect the dropdown to close, when I click inside the blue square. But unfortunately it doesn't (on mobile).

Best regards,
Søren

New threads created by Noman and linked to this one are listed below:

https://wpml.org/forums/topic/language-switcher-dropdown-issue-on-mobile/

Language switcher.jpg
Language switcher.jpg
September 28, 2018 at 2:22 pm #2774211

Noman
Supporter

Languages: English (English )

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

Hi,

Glad to hear that the language switcher display issue is fixed now 🙂

I have created a new ticket for language switcher dropdown issue on mobile since this is a separate issue. Here is the link to the new ticket: https://wpml.org/forums/topic/language-switcher-dropdown-issue-on-mobile/
You can mark this current ticket as resolved and we will continue to work on the new ticket.

Thank you
September 28, 2018 at 2:27 pm #2774218

sorenH-9

My issue is resolved now. Thank you!