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 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

#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?

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

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

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.