Multilingual website (mobile usability): Remove language switch when mobile menu is open

Site URL: https://lifelab.world/en/home

Hi everyone,

I have set up a multilingual site using bradgood tutorial. Now I am having difficulties on the mobile view.

The language switcher shows when the mobile menu is open. Can we please hide the language switcher when the mobile menu is open? Here is a photo for reference. 

Thank you so much!

5 minutes ago, Naomi-lifelab said:

Site URL: https://lifelab.world/en/home

Hi everyone,

I have set up a multilingual site using bradgood tutorial. Now I am having difficulties on the mobile view.

The language switcher shows when the mobile menu is open. Can we please hide the language switcher when the mobile menu is open? Here is a photo for reference. 

Thank you so much!

Try adding to Home > Design > Custom Css

.is-mobile-overlay-active .language {
  display: none;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing

Thank you Sir @bangank36 You are a life saver! It worked!!!!!

@bangank36 could you help me too? I also followed the brad good tutorial and everything works great on the desktop version. However, the switcher is not good for the mobile view. 

I tried what you said above, but it did not work (I am not the best at this...)

Ideally, I would like to have switcher somewhere in the mobile menu. If it is not something that can be done, I would prefer to remove it completely from the mobile version.

Thanks

url: https://www.panoraloges.ca/

1 hour ago, HP920 said:

@bangank36 could you help me too? I also followed the brad good tutorial and everything works great on the desktop version. However, the switcher is not good for the mobile view. 

I tried what you said above, but it did not work (I am not the best at this...)

Ideally, I would like to have switcher somewhere in the mobile menu. If it is not something that can be done, I would prefer to remove it completely from the mobile version.

Thanks

url: https://www.panoraloges.ca/

Try

@media only screen and (max-width: 767px) {
  .language {
    left: 250px;
    right: unset;
    transform: translate(-50%,-50%);
  }
}

to move it to the right.

Or

@media only screen and (max-width: 767px) {
  .language {
    display: none;
  }
}

to hide it

Wow thank you so much for this!