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!