WEGLOT - customise switcher

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!

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

Nice! Thank you @tuanphan!
Can this treatment be applied to mobile as well?

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

Thank you @tuanphan i added the code you provided below but now the switcher is gone on mobile.

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

Thanks @tuanphan! that works!

I wonder if now you can help me to refine a bit:

1. Can the same treatment  (ESP/ENG) bolded on the current language and the  / be added to mobile? to match desktop.
2. I'll like to have all text (nav links, social links, search and language switcher) all aligned to the left
3. Adjust the spacing (top and bottom) between these bottom links

Thanks so much again

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

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?

change this line in the code 

 text-decoration: underline;

to

font-weight: bold;

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

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? 
 

Great, thanks one more time @tuanphan!

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

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?