Jump to content

Weglot mobile language switcher doesn't reload the page

Go to solution Solved by tuanphan,

Recommended Posts

Posted

Hi, on my website: https://www.equipebertrandgomes.ca/

I implemented the Weglot extension, everything works fine, but on mobile, once I go to the menu on the top right, go to the language switcher, click on the 2nd language, it doesn't hide the menu and show the page in the other language, just stays on the menu screen.

Is there any way to make the mobile menu hide and show the translated page?

Note: I've contacted support@weglot.com as instructed on other posts and they mentioned the following:

The official integration between Squarespace and Weglot powers your language switcher. For detailed guidance on customizing the language switcher, you can refer to this Squarespace documentation: Customize the language switcher.
we can't edit how the menu switcher looks like and currently, the only way to go back to the website after changing language is to go back using menu arrows.

Any guidance helps, thanks

Posted

You can consider move WeGlot outside Burger Menu, maybe next to burger, with this code to 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;
}
}

 

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

Hi everyone, so I implemented "subdirectories" (having the language code in the url after your domain name, like abc.com/fr for example) within Weglot and now on mobile, when I select the language, it hides the menu and reloads the page in the other language "properly"!! 🥳

(if you need to do this, please follow instructions on Weglot's support articles)

 

@tuanphan I like your script, and it works great, however I don't like the default "dropdown" design, is there any script you can provide that removes the dropdown and puts the languages side-by-side with a separator? For example:

EN | FR

If the design was like this, I can position the language switcher on the header as per your script and position it in the middle above my logo! That would be extra cool! Bonus would be to display it on the header and hide it in the burger menu on mobile. Let me know if there is anything that can be done in this regards.

Thank you!

Posted
17 hours ago, iamshaz said:

Hi everyone, so I implemented "subdirectories" (having the language code in the url after your domain name, like abc.com/fr for example) within Weglot and now on mobile, when I select the language, it hides the menu and reloads the page in the other language "properly"!! 🥳

(if you need to do this, please follow instructions on Weglot's support articles)

 

@tuanphan I like your script, and it works great, however I don't like the default "dropdown" design, is there any script you can provide that removes the dropdown and puts the languages side-by-side with a separator? For example:

EN | FR

If the design was like this, I can position the language switcher on the header as per your script and position it in the middle above my logo! That would be extra cool! Bonus would be to display it on the header and hide it in the burger menu on mobile. Let me know if there is anything that can be done in this regards.

Thank you!

You can try this CSS code

/* Change WeGlot Dropdown */
.language-picker-content {
    opacity: 1 !important;
    display: flex;
    pointer-events: initial !important;
}
.current-language {
    display: none !important;
}
html[lang="en-GB"] .language-item:nth-child(2) a {
    border-bottom: 1px solid;
}
html[lang="fr"] .language-item:nth-child(1) a {
    border-bottom: 1px solid;
}
.language-picker-content {
    position: static !important;
}
.language-item {
    margin-left: 5px;
    margin-right: 5px;
}

image.thumb.png.e617a68b412aa1c20b73f2bbdec127da.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
On 10/6/2024 at 5:03 AM, tuanphan said:

You can try this CSS code

/* Change WeGlot Dropdown */
.language-picker-content {
    opacity: 1 !important;
    display: flex;
    pointer-events: initial !important;
}
.current-language {
    display: none !important;
}
html[lang="en-GB"] .language-item:nth-child(2) a {
    border-bottom: 1px solid;
}
html[lang="fr"] .language-item:nth-child(1) a {
    border-bottom: 1px solid;
}
.language-picker-content {
    position: static !important;
}
.language-item {
    margin-left: 5px;
    margin-right: 5px;
}

image.thumb.png.e617a68b412aa1c20b73f2bbdec127da.png

@tuanphan That looks really nice! I tried to add the previous code to show the languages on the header, and although I can position it where I want, when I open the mobile menu, the whole menu shifts and it looks weird since its not centered anymore, and the position of the languages change if I go to another page

Is it possible to show this last design of side by side in the mobile menu where the original language switcher is? I tried to do display: flex on the .current-language class but it shows both language switchers on desktop and on mobile it shows with the arrow.

Hope I was clear 😅 Thank you again for your follow ups!! Really appreciate it.

  • Solution
Posted
13 hours ago, iamshaz said:

@tuanphan That looks really nice! I tried to add the previous code to show the languages on the header, and although I can position it where I want, when I open the mobile menu, the whole menu shifts and it looks weird since its not centered anymore, and the position of the languages change if I go to another page

Is it possible to show this last design of side by side in the mobile menu where the original language switcher is? I tried to do display: flex on the .current-language class but it shows both language switchers on desktop and on mobile it shows with the arrow.

Hope I was clear 😅 Thank you again for your follow ups!! Really appreciate it.

Try this

@media screen and (min-width:992px) {
/* Change WeGlot Dropdown */
.language-picker-content {
    opacity: 1 !important;
    display: flex;
    pointer-events: initial !important;
}
.current-language {
    display: none !important;
}
html[lang="en-GB"] .language-item:nth-child(2) a {
    border-bottom: 1px solid;
}
html[lang="fr"] .language-item:nth-child(1) a {
    border-bottom: 1px solid;
}
.language-picker-content {
    position: static !important;
}
.language-item {
    margin-left: 5px;
    margin-right: 5px;
}
}

 

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!)

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.