Hi. I'm trying to put a multilingual button EN | FR on the top of my mobile site.

Hi. I'm trying to put a multilingual button EN | FR on the top of my mobile site. Does anyone know the code please? I uploaded my mobile page (Handsome) and the site example of what I am trying to achieve for my mobile button. Thanks

Hi,

What is your site url? We can check easier

www.handsomecoffee.ca

Thanks

Try this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width: 992px) {
.header-display-desktop {
    display: flex;
    justify-content: center;
}
.header-display-desktop .header-burger, .header-display-desktop .header-title-nav-wrapper,
.header-display-desktop .header-actions-action--cart{
    display: none;
}
.header-actions.header-actions--right {
    display: flex;
    flex: 1 1 100% !important;
    max-width: unset !important;
}
.header-display-desktop .language-picker-desktop {
    display: block;
    margin: 0 auto;
}
.header-inner {
    flex-direction: column;
}
.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*="fr"] .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;
}
.header-menu-actions.language-picker.language-picker-mobile {
    display: none
}
}

Thank you.

Hi. It looks good at the top, but how do I change the English|Francais into EN|FR and place it on the left hand side of the mobile site? 

www.handsomecoffee.ca

Thanks so much

Try this CSS code

@media screen and (max-width:991px) {
.header-actions  .language-picker-content .language-item:nth-child(1) span:after {
   content: 'FR';
    font-size: 12px
}
.header-actions  .language-picker-content .language-item:nth-child(2) span:after {
   content: 'EN';
    font-size: 12px
}
.header-actions  .language-picker-content  .language-item span {
    font-size: 0
}
html[lang*="en-"]
 .language-picker .current-language-name, [lang="es"] .language-picker .current-language-name  {
     font-size: 0 !important
}
html[lang*="en-"]
 .header .language-picker .current-language-name:after {
     content: 'EN';
    font-size: 12px !important
}
[lang="es"] .language-picker .current-language-name:after {
     content: 'FR';
    font-size: 12px !important
}
.header-actions .language-picker-desktop .language-picker-content {
   padding-left: 0;
   padding-bottom: 0
}

.header .language-picker-content a {
    justify-content: center;
}
div#multilingual-language-picker-desktop {
 margin-left: 0 !important;
}

.language-picker-content {
    justify-content: flex-start !important;
}
}

Hi. Thank you. It's very close. Is there a way to line up the FR/EN with the rest of the header? Right now, the FR/EN is sitting high

www.handsomecoffee.ca

What should it look like?