Weglot mobile language switcher doesn't reload the page

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

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

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!

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

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

@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.

@tuanphan You are the G.O.A.T, thank you so much!!