Language selector switch

Hello everyone

My site is available in English and Lithuanian langauges, but switching between the two languages on the mobile screen is inconvenient because it requires a three-step action.

I would like language switch to be displayed on top of the screen without having to go few times through a header. 

That would be very much appreciated, thank you!

I tried the code below but it doesn't work: 

@media screen and (max-width:991px) {
.header-actions.header-actions--right, .header .language-picker-desktop {
    display: flex !important;
    order: 3;
}
.header-title-nav-wrapper {
    flex: 1 0 30% !important;
}
}

1 hour ago, Jeremy2338 said:

switching between...languages on the mobile screen is inconvenient because it requires a three-step action. I would like language switch to be displayed on top of the screen

Do you have a mockup of how you would like the top of the screen to look?

I agree that the top of the page is the ideal location for a language switcher, but whilst this is easy to achieve on desktop layouts, it is not so easy on mobile because this space is already taken by other important elements like the navigation icon, the cart icon and the brand/site name:

It's also important to bear in mind that mobile elements need to be touched, so these touch targets must have a minimum size and be sufficiently spaced. Crowding can cause errors, and these are likely to frustrate users, who then leave.

If it helps, user trials showed that putting the language switcher within the menu is a good alternative to having it in the top right or left corner. It is significantly better than the footer as pages tend to be longer when viewed on mobile, and users may never reach the footer.

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 I appreciate your thorough reply.

I have couple ideas on how to place the selector without displaying the language word next to the flag so it occupies minimal space. In addition to minimizing space, logo could be made smaller.

3 hours ago, paul2009 said:

If it helps, user trials showed that putting the language switcher within the menu is a good alternative to having it in the top right or left corner. It is significantly better than the footer as pages tend to be longer when viewed on mobile, and users may never reach the footer.

I am not sure I understand this part. English isn't my first language. . Can you please elaborate?

@paul2009 👋👋

@paul2009 you are absolutely right! The branding would be much smaller, lets leave it in the burger menu 🙂

Also, do you happen to known how to redirect the customer to the page after switch the language? Lets say the user decides to switch the language from tge homepage, store, contacts etc., -> burger menu -> language selector -> ENGLISH -> and gets redirected straight to the page he switched the language from.

5 minutes ago, Jeremy2338 said:

do you happen to known how to redirect the customer to the page after switch the language?

I'm not sure that I understand your question. When the user chooses the alternative language, they should remain on the page, but see a translated version.

@paul2009 I forgot to add that this my question applies only to mobile browser.

Sorry, I should have explained that it worked the same for me on mobile too.

How interesting. When I click on mobile it doesn't redirect.

Is it possible to move the language selector folder inside the burger menu out and place it next to the burger menu like in the picture? https://www.natureswim.com

Hello, is there a solution for the question from @NatureSwim ? We're looking for the same solution for our website: https://www.nsagarantie.com

Thanks a lot!
Natasa

On 2/5/2024 at 3:54 PM, hello_studiofrey said:

Hello, is there a solution for the question from @NatureSwim ? We're looking for the same solution for our website: https://www.nsagarantie.com

Thanks a lot!
Natasa

You can search on Forum, I used to help a member achieved this, I don't remember the code but I provided code there. If you still can't find it, you can let me know, I will test code again

Hello @tuanphan, unfortunately, I haven't found this exact problem anywhere in the forum solved. Could you please help me out? Thanks a lot!
 

On 2/7/2024 at 8:50 PM, hello_studiofrey said:

Hello @tuanphan, unfortunately, I haven't found this exact problem anywhere in the forum solved. Could you please help me out? Thanks a lot!
 

Try this code to Website > Website Tools > Custom CSS

@media screen and (max-width:991px) {
.header-display-desktop {
    display: block !important;
    position: absolute;
    right: 15vw;
    z-index: 99999999;
}

.header-display-desktop .header-title-nav-wrapper, .header-display-desktop .header-burger {
    display: none;
}

.header-dislay-desktop .header-actions.header-actions--right {
    display: flex !important;
}

div#multilingual-language-picker-desktop {}

.header-display-desktop .header-actions.header-actions--right, .header-display-desktop div#multilingual-language-picker-desktop {
    display: flex !important;
}
}

@tuanphan thank you very much!