Hi. I'm trying to move a multilingual button EN | FR to the left hand side of my mobile site.

Hi. Member tuanphan was very helpful in putting the English and French at the top of my mobile site, but do you know how I can change the English|Francais into a smaller EN|FR and place it on the left hand side of the mobile site instead of it being at the top.

www.handsomecoffee.ca

I pasted the code tuanphan had me input below and my website above.

thanks for your help

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

I added code here