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
Link to comment
  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

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

image.png.767c8ba4a17f4a80b975647992216c7b.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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
Link to comment
  • 3 weeks later...
  • 2 months later...
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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 

Link to comment
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.