Guest Posted December 28, 2022 Share Posted December 28, 2022 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
tuanphan Posted December 29, 2022 Share Posted December 29, 2022 #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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Guest Posted January 3, 2023 Share Posted January 3, 2023 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! Link to comment
Solution tuanphan Posted January 7, 2023 Solution Share Posted January 7, 2023 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
Guest Posted January 10, 2023 Share Posted January 10, 2023 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
nemoloveocean Posted March 30, 2023 Share Posted March 30, 2023 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
dngy Posted June 10 Share Posted June 10 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
dngy Posted June 10 Share Posted June 10 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
tuanphan Posted June 12 Share Posted June 12 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
dngy Posted June 12 Share Posted June 12 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. Link to comment
tuanphan Posted June 15 Share Posted June 15 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. 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
dngy Posted June 19 Share Posted June 19 Amazing. Thank you so much. All looks great. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment