Language selector switch

Hello there.

Our site is only available in English and Japanese, but switching between the two languages on the mobile screen isn't very clear because it requires a three-steps action.

If possible, we would like to display language switches on individual screens, including the top screen, so that users can switch languages with a single action.

If you have any advice on how to make language switching an easy display, I would appreciate your advice.

Thank you.

Add to Design > Custom CSS

@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;
}
}

It looks like this code won't work. You can remove it, I will test again some other code

Yes, I understand. Thank you for your time!

I would appreciate it if you could let me know what you find out.
 

I would be grateful for expert advice on a simple and easy way to switch between multilingual displays!

@tuanphan @FY_TOKYO Hi there! I'm facing the same problem and getting the same result as FY_TOKYO. Any possible solutions? Thanks much!

May you help me? @tuanphan

Hi Jeremy2338, Thank you for contacting me. I apologize for the delay in responding.
Unfortunately, there is still no solution. I would appreciate it if you could let me know what you find out.

Hi there! 

I got a switch language button on a client's website. Everything is good on desktop, but on mobile, the switch language is huge. I would like to resize it to the same size of my menu navigation.

Here's the code that I tried:

@media screen and (max-width: 767px){
  .header .language-picker-desktop {
    font-size: 20px;
}
}

Link: https://scms-test.squarespace.com/
PW: freelance

On 10/9/2023 at 8:30 PM, abbiericher said:

Hi there! 

I got a switch language button on a client's website. Everything is good on desktop, but on mobile, the switch language is huge. I would like to resize it to the same size of my menu navigation.

Here's the code that I tried:

@media screen and (max-width: 767px){
  .header .language-picker-desktop {
    font-size: 20px;
}
}

Link: https://scms-test.squarespace.com/
PW: freelance

You can add this to Website Tools (under Not Linked) > Custom CSS

.header-menu-actions.language-picker.language-picker-mobile * {
    font-size: 18px !important;
}

Like always, thank you so much! 

Another question for you... It took 3 steps for the users to be able to switch language. Do you know how I can make the user experience faster with just one click? 

Eg: if the original language is French and the user is English, he would've just need to click on the hamburger menu and then select English instead of the actual procedure in 3 steps.

Thanks a lot @tuanphan 

On 10/12/2023 at 9:13 PM, abbiericher said:

Like always, thank you so much! 

Another question for you... It took 3 steps for the users to be able to switch language. Do you know how I can make the user experience faster with just one click? 

Eg: if the original language is French and the user is English, he would've just need to click on the hamburger menu and then select English instead of the actual procedure in 3 steps.

Thanks a lot @tuanphan 

Use this CSS code

@media screen and (max-width: 991px) {
.header-menu-nav-folder {
    transform: translatex(0);
    will-change: transform;
}
div#multilingual-language-picker-mobile .header-menu-nav-folder-content {
    justify-content:end;
}
.header--menu-open .header-menu .header-menu-nav-list {
    display: flex;
    flex-direction: column;
}
.header-menu-nav-folder--active {
        flex-grow: 1;
    }
#multilingual-language-picker-mobile  .header-menu-controls {
    display: none;
}
.header-menu-actions.language-picker.language-picker-mobile {
    display: none;
}
.header-menu-nav-folder {
    min-height: unset;
    position: static;
	overflow: hidden !important;
	margin-top: -20px !important;
}
}

And how can I move the language selectors closer to the button?

On 10/17/2023 at 10:55 PM, abbiericher said:

And how can I move the language selectors closer to the button?

Adjust this value

5 hours ago, tuanphan said:

Adjust this value

I tried already... but nothing changes. Any further help on the question?

Change this

.header-menu-nav-folder {
    min-height: unset;
    position: static;
	overflow: hidden !important;
	margin-top: -20px !important;
}

to this

.header-menu-nav-folder {
    min-height: unset;
    position: static;
    overflow: hidden !important;
    margin-top: -20px !important;
}
div#multilingual-language-picker-mobile {
    position: relative !important;
    top: -100px !important;
}

Hi there

I have the same Problem. Did you get a propper solution?

Best Regard
Claudio

On 1/23/2024 at 10:53 PM, cade said:

Hi there

I have the same Problem. Did you get a propper solution?

Best Regard
Claudio

What is your site url & What is problem?

@tuanphan I would like to eliminate the mobile menu completely and have only the language switcher show up in the header. Ideally the switcher would look almost the same as it does on desktop. Would be great if it could be above or below the logo. Can you help?

site url is www.caferama.mx

On 3/2/2024 at 1:33 AM, aquariusgarcelon said:

@tuanphan I would like to eliminate the mobile menu completely and have only the language switcher show up in the header. Ideally the switcher would look almost the same as it does on desktop. Would be great if it could be above or below the logo. Can you help?

site url is www.caferama.mx

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;
}
    .header-burger {
        visibility: hidden;
    }
}

@tuanphan thank you, that worked!

@tuanphan how could I reduce the width of the language switcher dropdown? on desktop and mobile.

On 3/6/2024 at 12:36 AM, aquariusgarcelon said:

@tuanphan how could I reduce the width of the language switcher dropdown? on desktop and mobile.

Add this under above code

.language-picker-content {
    min-width: unset !important;
}