Moving the Weglot element to the top of the menu on a mobile device

Site URL: https://www.lapetitefermedalpagas.com/

I'm using the translation service Weglot.  When on some mobile devices, the option to translate cannot be seen on the menu without scrolling down which I fear would send my french customers away.  Is there a way to have this element moved to the top of the menu?

On 5/13/2022 at 6:25 PM, SophieAlpaca said:

Site URL: https://www.lapetitefermedalpagas.com/

I'm using the translation service Weglot.  When on some mobile devices, the option to translate cannot be seen on the menu without scrolling down which I fear would send my french customers away.  Is there a way to have this element moved to the top of the menu?

Try adding to Design > Custom CSS
 

/* WeGlot Mobile */
@media screen and (max-width:767px) {
div#multilingual-language-picker-desktop {
    display: flex;
    position: fixed;
    top: 5px;
}}

On 5/15/2022 at 5:51 AM, tuanphan said:

Try adding to Design > Custom CSS
 

/* WeGlot Mobile */
@media screen and (max-width:767px) {
div#multilingual-language-picker-desktop {
    display: flex;
    position: fixed;
    top: 5px;
}}

 

Hello, thank you.  This is so nearly it.  You can see it but the selection isn't operating.  Any suggestions?

Thanks

Sophie

On 5/16/2022 at 7:59 PM, SophieAlpaca said:

Hello, thank you.  This is so nearly it.  You can see it but the selection isn't operating.  Any suggestions?

Thanks

Sophie

Ah, you can remove the code. I see it has a code hided Weglot on mobile. Can you check to see if there is an option in Weglot to enable this?

On 5/16/2022 at 8:59 AM, SophieAlpaca said:

I am also trying to move the Weglot Translation Option to the top of my mobile navigation... I tried pasting this code but it hasn't worked. Any other suggestion?

On 12/1/2022 at 2:32 AM, Studiobyshera said:

I am also trying to move the Weglot Translation Option to the top of my mobile navigation... I tried pasting this code but it hasn't worked. Any other suggestion?

What is your site url? We can check easier

Is there a way to get the translation element to replace the shopping cart element as the only one that shows up on mobile before clicking the menu? I would like the translation element to be as visible as possible.

kmblrealestate.com

On 3/8/2023 at 9:22 PM, blouk said:

Is there a way to get the translation element to replace the shopping cart element as the only one that shows up on mobile before clicking the menu? I would like the translation element to be as visible as possible.

kmblrealestate.com

Add to Design > Custom CSS

/* show language on mobile */
@media screen and (max-width:767px) {
.header-actions.header-actions--right, .header-actions.header-actions--right>div:first-child {
    display: flex !important;
}
}

Hi @tuanphan

I'm trying to achieve exactly this for https://www.avitalu.cz/ (what you're showing in the latest post), but somehow I keep getting this result:

First problem seems to be the padding and that website menu dissapeared, and the second is that on click there seems to be some white overlay, but that's all. You can't really click anything.

Could you advise here please? Thank you!
Lukas

On 10/10/2023 at 7:08 PM, Avitalu333 said:

Hi @tuanphan

I'm trying to achieve exactly this for https://www.avitalu.cz/ (what you're showing in the latest post), but somehow I keep getting this result:

 

First problem seems to be the padding and that website menu dissapeared, and the second is that on click there seems to be some white overlay, but that's all. You can't really click anything.

Could you advise here please? Thank you!
Lukas

Try this new code

/* show language on mobile */
@media screen and (max-width:767px) {
.header-actions.header-actions--right, .header-actions.header-actions--right>div:first-child {
    display: flex !important;
}
    .header-actions.header-actions--right {
    position: relative;
    left: -50px;
}
}

Is there a way to get the translation element to replace the shopping cart element as the only one that shows up on mobile before clicking the menu? I would like the translation element to be as visible as possible.
this code doesnt work for me ... my url is healandshine.eu

/* show language on mobile */
@media screen and (max-width:767px) {
.header-actions.header-actions--right, .header-actions.header-actions--right>div:first-child {
    display: flex !important;
}
}

As well for some reason even if i take all the elements away from the header and leave only site language its not appearing. Can someone help please 🙂 thanks 

i mean on the mobile version because on the laptop its fine. on mobile i can only make show the cart for some reason even if other elements are ticked 

On 10/12/2023 at 1:21 PM, tuanphan said:

Try this new code

/* show language on mobile */
@media screen and (max-width:767px) {
.header-actions.header-actions--right, .header-actions.header-actions--right>div:first-child {
    display: flex !important;
}
    .header-actions.header-actions--right {
    position: relative;
    left: -50px;
}
}

 

Hi @tuanphan, thank you. This moved the language selection correctly to the left, but there are still two issues:

1) The menu button dissapeared entirely 
2) Language selection is still not working

Do you have any ideas please?
Thank you in advance!

@SophieAlpaca Hi, Sophie, I noticed you have some solution on your website. Could you share the CSS code please?

Thank you in advance!

Hi @tuanphan i forgot to tag you but i need help with the message i posted above. I'd appreciate a lot if you could help thanks 

On 10/12/2023 at 1:21 PM, tuanphan said:

Try this new code

/* show language on mobile */
@media screen and (max-width:767px) {
.header-actions.header-actions--right, .header-actions.header-actions--right>div:first-child {
    display: flex !important;
}
    .header-actions.header-actions--right {
    position: relative;
    left: -50px;
}
}

 

Hi @tuanphan this works to make it show up on mobile but i cant switch language basicaly the button doesnt work. Can you Help ? Thanks 

On 11/13/2023 at 4:46 PM, HealandShine said:

Hi @tuanphan this works to make it show up on mobile but i cant switch language basicaly the button doesnt work. Can you Help ? Thanks 

@Avitalu333 @HealandShine Use this new CSS code

@media screen and (max-width:767px) {
.header-display-desktop {
    display: flex !important;
}

.header-burger {
    display: none;
}
.header-display-desktop .header-actions.header-actions--right, .header-actions.header-actions--right>div:first-child {
    display: flex !important;
}
    .header-actions.header-actions--right {
    position: relative;
    left: -50px;
}

.header-display-mobile {
    display: none;
}
}