Jump to content

Language selector switch

Recommended Posts

Posted (edited)

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.

#1.PNG

#2.PNG

#3.PNG

Edited by FY_TOKYO
Posted (edited)
Hi tuanphan,
 
As always, thank you for your kind advice!
I copied and pasted the code you gave me, and now I can see the language switch on the mobile screen.
 
However, the English switches are displayed, but not the Japanese ones. 
The desktop view is fine, but it does not appear in the mobile view.

If possible, I would like to display the language of the switch as "日本語" for Japanese, but if there is a way to do this, I would appreciate your advice.
 
This may be a rudimentary question, but please forgive me.
 
 
IMG_3BD3606A9E12-1.thumb.jpeg.4a46bbbb7584ff240e9de0580c160819.jpeg

CSS.png

Edited by FY_TOKYO
Posted (edited)

Yes, I understand. Thank you for your time!

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

Edited by FY_TOKYO
  • 3 weeks later...
  • 2 months later...
Posted

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.

Posted

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

Capture d’écran, le 2023-10-09 à 09.29.16.png

Posted
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

Capture d’écran, le 2023-10-09 à 09.29.16.png

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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 

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

image.thumb.png.12a9cd020a2c55a3af477ea1d49a1e51.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 3 months later...
  • 1 month later...
Posted (edited)

@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

Edited by aquariusgarcelon
Posted
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;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 7 months later...
Posted

Hi,

I would like to align the language selector on mobile to the left. I'm using the Weglot plugin.

I'm trying to achieve the look on the right (see #2).

My website is dragoslazarin.com, there's no password.

Thank you! 

Screenshot 2024-10-08 at 15.08.29.p-2sd.jpg

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.