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: I want to show EN / FR for language switcher ONLY in the Mobile version. Desktop page should show full form English / French.

Solution: Solution here: https://wpml.org/forums/topic/language-switcher-with-2-letters-only-on-mobile-versions/#post-3084480

This topic contains 13 replies, has 2 voices.

Last updated by alinam-2 8 months, 1 week ago.

Assigned support staff: Noman.

Author Posts
January 12, 2019 at 6:35 am #3082790

alinam-2

Gello,

I would like to have the language switcher per default (ie full name of language) on PC, but get it reduced to 2 letters (ie EN for English) on mobile where space is reduced.

I saw the way below in forum, but I can't be specific to mobile only
WPML > Languages > Site Languages > Edit Languages

Is there a way to manage that?

Kind regards

January 12, 2019 at 10:57 am #3083030

Noman
Supporter

Languages: English (English )

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

Hi,

Thank you for contacting WPML Support. If your theme allows to show a separate menu for the mobile menu, then you can create a separate menu and add custom language switcher to that.

But if your theme does not allow any option to add a separate menu for mobiles, then you need to use some CSS to achieve this, you need to modify the text and show two letters only for the language using “content” property, the target selector would be something like this:

:lang(en) #nav::after {
    content: 'EN';
   your css code here...
}

:lang(fr) #nav::after {
    content: 'FR';
   your css code here...
}

Please let me know if you or your developer is comfortable adding CSS at your own or if you would need further help. Thank you

January 12, 2019 at 12:56 pm #3083159

alinam-2

Hello Noman,
Thank you for this. Well, I have to say that I am alone and dummie.

My theme (xtemos / basel) has a mobile menu.

What I want to get, is full name of language in PC View (eg ENGLISH)
And 2 letters in Mobile View (eg EN).

On attached image 35a
- Green circle; you can see that I can choose mobile meny
- blue circle: I can there choose
* flag or nor
* other language name as said in this given language (eg English)
* other language name in original language (for me, it's French, so it would be here Anglais).
But there is no option there to choose EN instead of ENGLISH, specifically for the mobile menu.

Then, there is this edit language (image 35b). If I replace here "ENGLISH" by "EN", then I will have "EN" everywhere (in all menus), and not specifically MOBILE menu.

So, I don't see how to get "EN" only on mobile, and "ENGLISH" on desktops

Kind regards

January 13, 2019 at 11:20 am #3084480

Noman
Supporter

Languages: English (English )

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

Hello,

Thanks for more details. You can achieve it by adding following CSS in your theme’s or child theme style.css file OR Custom CSS section of the theme:

@media(max-width:992px) {
.wpml-ls-item a span {
	color:transparent;
	font-size:0;
}

.wpml-ls-item > a > span::before {
	color:#000;
	font-size:14px;
	position: relative;
	left: 5px;
}

.wpml-ls-item.wpml-ls-current-language > a > span::before {
	font-size:15px;
}

.wpml-ls-item-fr > a span::before{
	content:'FR';
}

.wpml-ls-item-en > a span::before{
	content:'EN';
}
}

And it will look as in attached screenshot.

Please let me know if this resolves your issue or you need further assistance.

Thank you

January 13, 2019 at 3:39 pm #3084765

alinam-2

Hello,
Sorry, I copied / pasted this code in the custom css of the theme (image issue36c)

but it does not seem to work. I only have the flag (issue 36d)

Best regards

January 13, 2019 at 7:19 pm #3085115

Noman
Supporter

Languages: English (English )

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

I have replied you here: https://wpml.org/forums/topic/language-switcher-in-top-bar-disappearing-on-mobile-version/#post-3085101

I have the logins now, once you confirm the backup and other permission I have asked for in the new ticket, please let me know and I will continue to check this further and fix it.

Thanks

January 13, 2019 at 11:37 pm #3085385

alinam-2

Hi,
As said in former message, the back up is made and you can make any change
Kind regards

January 14, 2019 at 9:53 am #3086583

Noman
Supporter

Languages: English (English )

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

Thank you for the updates and permission. I am going to work on this issue today and will let you know once done. Thank you for waiting on this and for your cooperation 🙂

January 14, 2019 at 1:35 pm #3087713

Noman
Supporter

Languages: English (English )

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

Hi,

I have logged in to your site and checked CSS that I provided yesterday, there were some special characters added in CSS, I have just removed those special characters and added single quotes and issue is gone as you can see in attached screenshot.

Thank you

January 14, 2019 at 2:11 pm #3087984

alinam-2

Hi,
I don't know what could have happened as I just copied / pasted, but result is there, thank you for that, that's what I wished.
Would it be possible to have the FR / EN only in top bar and in mobile?
and FRENCH / ENGLISH on all others?

I also see that the language switcher is now the top bar, in mobile version. Refering here to another issue. And that's really great!

Thank you ! 🙂

January 14, 2019 at 3:38 pm #3088485

Noman
Supporter

Languages: English (English )

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

Do you also want to remove EN / FR from Mobile Menu, you want to show full form of words in both desktop and mobile menus?

And you only want to show EN / FR in Top bar (of Mobile View), is this correct?

January 14, 2019 at 5:11 pm #3089024

alinam-2

Yes, sorry, the ideal would be to have:
- top bar on mobile : FR / EN (reduced space)
- top bar on desktop: FRENCH / ENGLISH
- Menu on mobile: FRENCH / ENGLISH (since not longer than other menu elements)
- Menu on desktop: FRENCH / ENGLISH

I also think that the 2 letters should be proposed as an option in the settings of WPML language switcher. The 2 letters is the only viable option on mobile, where the space is reduced.

Kind regards

Kind regards

January 15, 2019 at 8:47 am #3091407

Noman
Supporter

Languages: English (English )

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

Hi,

I have updated previous CSS and now it looks as in attached screenshots. If you want to add a feature to display 2 letters only on mobile language switcher then please fill this feature request form:
https://wpml.org/suggest-a-new-feature-for-wpml/

Thank you

January 15, 2019 at 5:29 pm #3094186

alinam-2

My issue is resolved now. Thank you!