Jump to content

Weglot language switcher

Go to solution Solved by tuanphan,

Recommended Posts

Hi,

website: https://www.lazimdestani.com

password: Arnoridesign2211

I have installed Weglot. Could someone please help me customize the following:

- underline the current selected language;

- I want the page to refresh when the language is changed. As it is now, it is difficult to notice the language change on mobile, it doesn’t indicate anything, nor does it refresh the current page.

- I want to make the language switcher box a little nicer with more space.

help is appreciated! Thanks so much!!

Link to comment
  • Replies 11
  • Views 2.5k
  • Created
  • Last Reply

Top Posters In This Topic

On 12/29/2022 at 10:43 AM, tuanphan said:

#1. Add to Design > Custom CSS

span.current-language-name {
    border-bottom: 1px solid;
}

#2. I don't know this

#3. What should it look like?

Hi Tuanphan,

My idea was to underline the current selected language in the mobile menu (check photo). The reason for this is that when on mobile, it is difficult to understand which one is the current selected language. The code underlines it in the Header menu but doesn't work on mobile view.

#3. I was thinking to add a bit more space between the languages and to add the hover effect on the different languages, just like it is on the navigation links. That would be ideal.

Thanks so much for your help!

 

Screenshot 2023-01-03 at 15.24.08.png

Link to comment
  • Solution

Add to Design > Custom CSS

html[lang="en"]  .language-picker-content>div:nth-child(1) span {
    border-bottom: 1px solid;
}
html[lang="de"] .language-picker-content>div:nth-child(2) span {
    border-bottom: 1px solid;
}
html[lang="sq"] .language-picker-content>div:nth-child(3) span {
    border-bottom: 1px solid;
}

 

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 1/7/2023 at 9:35 AM, tuanphan said:

Add to Design > Custom CSS

html[lang="en"]  .language-picker-content>div:nth-child(1) span {
    border-bottom: 1px solid;
}
html[lang="de"] .language-picker-content>div:nth-child(2) span {
    border-bottom: 1px solid;
}
html[lang="sq"] .language-picker-content>div:nth-child(3) span {
    border-bottom: 1px solid;
}

 

Thank you so much for your help! You're the best @tuanphan 🙌🏼

Link to comment
  • 2 months later...
On 12/28/2022 at 8:49 PM, Regont said:

I want the page to refresh when the language is changed.

Hi, 

I got the same problem too. Please help. How to refresh page when switch language on mobile? When I click other language, I hope it can refresh entire site to home page. 

Thank you so much!!

Link to comment
  • 1 year later...
On 1/7/2023 at 9:35 AM, tuanphan said:
html[lang="en"]  .language-picker-content>div:nth-child(1) span {
    border-bottom: 1px solid;
}
html[lang="de"] .language-picker-content>div:nth-child(2) span {
    border-bottom: 1px solid;
}
html[lang="sq"] .language-picker-content>div:nth-child(3) span {
    border-bottom: 1px solid;
}

 

Link to comment

Hi there

I added the above code, but in the mobile menu the underline goes to the language NOT selected. ae when I press "English" the underline goes to "German" - and the other way around. Any help you might be able to offer?

My website is allwindsrunning.ch

Thank you!

Link to comment
On 6/11/2024 at 2:48 AM, dngy said:

Hi there

I added the above code, but in the mobile menu the underline goes to the language NOT selected. ae when I press "English" the underline goes to "German" - and the other way around. Any help you might be able to offer?

My website is allwindsrunning.ch

Thank you!

Use this code

html[lang="en"]  .language-picker-content>div:nth-child(2) span {
    border-bottom: 1px solid;
}
html[lang="de"] .language-picker-content>div:nth-child(1) span {
    border-bottom: 1px solid;
}

 

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

It works! You are the best, thank you!

Would it also be possible to place the language switch outside of the menu on mobile, so it is visible directly up top without having to go into the menu first?
Similar to the desktop version - see screenshot attached.
Any help is much appreciated, thank you.Screenshot2024-06-12at16_58_34.thumb.png.5d6ec82220aeb344bfc9a98a0dae882b.png

Link to comment
On 6/12/2024 at 9:59 PM, dngy said:

It works! You are the best, thank you!

Would it also be possible to place the language switch outside of the menu on mobile, so it is visible directly up top without having to go into the menu first?
Similar to the desktop version - see screenshot attached.
Any help is much appreciated, thank you.Screenshot2024-06-12at16_58_34.thumb.png.5d6ec82220aeb344bfc9a98a0dae882b.png

You can use this code to Custom CSS box

@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
    position: absolute;
    right: 0;
    z-index: 99999999;
    flex-direction: row-reverse;
}

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

.header-display-desktop .header-actions.header-actions--right, .header-display-desktop div#multilingual-language-picker-desktop {
    display: flex !important;
}
    .header-actions.header-actions--right {
    position: relative;
    right: -4vw;
}
}

 

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.