BlueOwlCreative » Topic: Menu issue in mobile version.

Menu issue in mobile version.

drunkfox — Mon, 12 Jun 2017 17:13:06 +0000

Hi there.
I have a multilanguage website, and I use WPML plugin, the most popular WordPress plugin which allows running fully multilingual websites with WordPress.
Unfortunately the menu of my website does not shown the languages within the mobile version.
But if I touch the empty space, the languages flags works well.
It seems that the image of flags are not shown. If I use a text (English, Italian, Japanes) the text is shown, but I prefer to show the flags instead of some text.
Please see the screenshots to better understand my poor English
Screenshot 1

Screenshot 2

My website is Guide Dolomiti
may you help me, please?
Thank you!
Enrico

Reply To: Menu issue in mobile version.

BlueOwl — Tue, 13 Jun 2017 07:16:14 +0000

Hi there,

Long time no hear!
What you could do is add a label to your flags in the Menu, then hide that label in desktop resolution with a media query (by adding a negative text-indent: -10000px; for example) by adding a specific class to those menu items… something like this:

@media only screen and (min-width: 769px) {
  .hide_label {
    text-indent: -10000px;
  }
}

then add the “hide_label” class to your 2 language menu items.

Reply To: Menu issue in mobile version.

drunkfox — Tue, 13 Jun 2017 14:26:41 +0000

Ciao BlueOwl,
thanks for your support.
It seems to be a little bit too difficult for a dummy like me
I will try to ask at the support of WPML, maybe they have an easyest way to fix…
Thank you.
Enrico