LucyBold Posted December 12, 2023 Share Posted December 12, 2023 Hello there! I will like to simplify the WEGLOT language switcher I currently have on my site https://www.lacalifornie.es I will like to: - remove the dropdown and instead have both languages display side to side (ESP/ENG) with the current language bolded (ESP/ENG) or underlined (ESP/ENG) - adjust the spacing between these and the cart icon Thanks in advance! Link to comment
tuanphan Posted December 13, 2023 Share Posted December 13, 2023 Use this code to Website Tools (under Not Linked) > Custom CSS .header-search-bar { padding-left: 9vw !important; padding-right: 0; } .language-picker-content { position: static !important; opacity: 1 !important; pointer-events: all !important; display: flex; justify-content: flex-end; } .header-actions .language-picker-desktop .current-language { display: none !important } html[lang*="es"] .language-item:nth-child(1) span { font-weight: 600; } html[lang*="en"] .language-item:nth-child(2) span { font-weight: 600; } .header-actions .language-picker-desktop .language-item:first-child:after { content: "/"; display: inline-block; padding-left: 2px; padding-right: 2px; font-size: 20px; } .header-actions .language-picker-desktop .language-item { display: flex; flex-direction: row; } Begona and LucyBold 2 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
LucyBold Posted December 13, 2023 Author Share Posted December 13, 2023 Nice! Thank you @tuanphan! Can this treatment be applied to mobile as well? Link to comment
tuanphan Posted December 15, 2023 Share Posted December 15, 2023 Mobile needs this code @media screen and (max-width: 991px) { .header-menu-nav-folder { transform: translatex(0); will-change: transform; } div#multilingual-language-picker-mobile .header-menu-nav-folder-content { justify-content:end; } .header--menu-open .header-menu .header-menu-nav-list { display: flex; flex-direction: column; } .header-menu-nav-folder--active { flex-grow: 1; } #multilingual-language-picker-mobile .header-menu-controls { display: none; } .header-menu-actions.language-picker.language-picker-mobile { display: none; } .header-menu-nav-folder { min-height: unset; position: static; overflow: hidden !important; margin-top: -20px !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!) Link to comment
LucyBold Posted December 15, 2023 Author Share Posted December 15, 2023 Thank you @tuanphan i added the code you provided below but now the switcher is gone on mobile. Link to comment
tuanphan Posted December 16, 2023 Share Posted December 16, 2023 Change to this new code @media screen and (max-width:767px) { div#multilingual-language-picker-mobile { display: block !important; } a[data-folder-id="language-picker"] { display: none !important; } .language-picker-content>div.header-menu-nav-item { padding: 0 !important; display: inline !important; margin-left: 5px; } .header .language-picker-content a { display: inline-block !important; margin: 0 !important; } .language-picker-content { display: block !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!) Link to comment
LucyBold Posted December 16, 2023 Author Share Posted December 16, 2023 Thanks @tuanphan! that works! I wonder if now you can help me to refine a bit: Can the same treatment (ESP/ENG) bolded on the current language and the / be added to mobile? to match desktop. I'll like to have all text (nav links, social links, search and language switcher) all aligned to the left Adjust the spacing (top and bottom) between these bottom links Thanks so much again Link to comment
tuanphan Posted December 19, 2023 Share Posted December 19, 2023 Add this code under @media screen and (max-width:767px) { .language-picker-content div:first-child:after { content: "/"; display: inline-block; padding-left: 5px; padding-right: 2px; font-size: 20px; } html[lang*="en"] .language-picker-content>div:first-child span { text-decoration: underline; } html[lang*="es"] .language-picker-content>div:nth-child(2) span { text-decoration: underline; } .header-menu-actions.social-accounts { margin-bottom: 0px !important; } .mobile-custom-info p:empty { display: none !important; } .mobile-custom-info p:nth-last-child(-n+2) { margin-bottom: 0 !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!) Link to comment
LucyBold Posted December 19, 2023 Author Share Posted December 19, 2023 thank you @tuanphan I'll like if possible to match the treatment I have on desktop; the language in use to be bolded instead of underline, is this possible? Link to comment
tuanphan Posted December 21, 2023 Share Posted December 21, 2023 change this line in the code text-decoration: underline; to font-weight: bold; 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
LucyBold Posted December 22, 2023 Author Share Posted December 22, 2023 Thank you so much @tuanphan! Last thing, I just realised that the behaviour is reversed; it gets bolded the opposite language the page is in.. Link to comment
LucyBold Posted December 23, 2023 Author Share Posted December 23, 2023 Thank you so much @tuanphan! (Two!) last things: - I just realised that the behaviour is reversed; it gets bolded the opposite language the page is in.. - Can i apply one of the custom fonts I already have uploaded to this switcher/text? Link to comment
Solution tuanphan Posted December 30, 2023 Solution Share Posted December 30, 2023 On 12/22/2023 at 3:22 PM, LucyBold said: Thank you so much @tuanphan! Last thing, I just realised that the behaviour is reversed; it gets bolded the opposite language the page is in.. Change these line html[lang*="en"] .language-picker-content>div:first-child span { text-decoration: underline; } html[lang*="es"] .language-picker-content>div:nth-child(2) span { text-decoration: underline; } to this html[lang*="en"] .language-picker-content>div:nth-child(2) span { font-weight: bold; } html[lang*="es"] .language-picker-content>div:first-child span { font-weight: bold; } On 12/23/2023 at 9:57 PM, LucyBold said: Thank you so much @tuanphan! (Two!) last things: - I just realised that the behaviour is reversed; it gets bolded the opposite language the page is in.. - Can i apply one of the custom fonts I already have uploaded to this switcher/text? Use some code like this .header .language-picker-content * { font-family: 'SaolDisplay-Medium' !important; } LucyBold 1 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
LucyBold Posted January 2 Author Share Posted January 2 Great, thanks one more time @tuanphan! Link to comment
Julia2407 Posted July 24 Share Posted July 24 Good afternoon, I have enabled translation of the language from English into Russian, but in Russian the font does not correspond to the original. Is it possible to change the translation font to one similar to English? my web site is www.juliapererva.com Link to comment
tuanphan Posted July 26 Share Posted July 26 On 7/24/2024 at 12:28 PM, Julia2407 said: Good afternoon, I have enabled translation of the language from English into Russian, but in Russian the font does not correspond to the original. Is it possible to change the translation font to one similar to English? my web site is www.juliapererva.com I just checked navigation and I see both already use Poppins. Can you let me know which elements do you have problem with? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment