Jump to content

Language selector switch

Recommended Posts

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 23
  • Views 4.3k
  • 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

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

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

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

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

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

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

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

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

Link to comment
  • 3 months later...
  • 1 month later...
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!)

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

Screen Shot 2024-03-05 at 11.36.19 AM.jpg

Add this under above code

.language-picker-content {
    min-width: unset !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!)

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.