Skip Navigation

Home › Support › English Support › [Resolved] Display dropdown language switcher on desktop and horizontal list on mobile

[Resolved] Display dropdown language switcher on desktop and horizontal list on mobile

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 Andreas 2 years, 7 months ago.

Assisted by: Andreas.

Author Posts
October 12, 2022 at 6:12 pm #12229401

anabelZ

I've added a dropdown language switcher to the main menu on desktop, but I would like to display an horizontal list format on tablet and mobile, since they're inside a burger menu and the dropdown chevron is too far to the right so I'm worried users might miss it (horizontal format: flag + native name)

Is there any documentation that you are following?
I'm following this guide and previous support tickets, but can't find the exact solution: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#custom-locations

Is there a similar example that we can see?
I've found this ticket but can't access it: https://wpml.org/forums/topic/how-can-i-use-2-different-language-switcher-in-desktop-and-mobile/

What is the link to your site?
hidden link

Screenshot 2022-10-12 at 13.10.45.png
Screenshot 2022-10-12 at 13.10.58.png
October 13, 2022 at 9:29 am #12233873

Andreas

Hello there

Thank you for contacting us. I am happy to help you.

You can develop your own custom language switcher and display theme where every you wish

Starting from here :
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#your-own-custom-language-switchers

And go here :
https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/

Then with custom code or css you can display each language swither to desktop or mobile.

The other ticket you show me , has the exact same reply.

I hope this helps. Please let us know how it goes or if you need any further assistance. I'll gladly help you. 🙂

Regards,
Andreas
October 13, 2022 at 2:00 pm #12236761

anabelZ

Hi Andreas, thanks for your answer!
I've read all the documentation but I'm only vaguely familiar to CSS and I can't seem to find an exact example of how to display the menu switcher in different format on mobile in other support tickets. That's how far my CSS skills go. I was hoping you would point me in the right direction with custom CSS to get the mobile version to display horizontally.

I've been trying different versions of this without success:

@media and screen (max-width: 768px) {
.wpml-ls-menu-item .wpml-ls-legacy-list-horizontal {
    display:block;
  }
}

Thanks so much for your help!
October 13, 2022 at 3:35 pm #12237327

Andreas

Thank you for your message.

I understand what you told me. But in order to do this, you need 2 different language switchers in the menu with different designs.

We cannot do this only with css.

I can help you by pointing to a place, but that needs code to implement. If you are a little bit familiar I can share some hints.

If you are not able to accomplish this, you could also try to hire a WPML contractor (https://wpml.org/contractors/)

You can tell me what you wish to do.

Regards,
Andreas
October 20, 2022 at 2:05 pm #12280491

anabelZ

Thanks Andreas! I would appreciate the hints very much, if you could share them with me. Thanks!
October 21, 2022 at 8:07 am #12285049

Andreas

Thanks of course I can share .

You can use our hooks :

https://wpml.org/documentation/support/wpml-coding-api/wpml-hooks-reference/#hook-1260383

and you develop 2 language switchers add them to the position you wish and then with CSS you can display them per device.

I hope this helps. Please let us know how it goes or if you need any further assistance. I'll gladly help you. 🙂

Regards,
Andreas