[shortcoastParticipant]

Hello,
I have 2 languages installed on my site (english & italian) and, on top menu, a flag is showing in order to switch between those two languages: http://www.vinodiretto.it/en/
This happens of course both on desktop and mobile versions.

But on mobile/smartphone, being the flag a menu item, it’s actually placed under the hamburger icon, so it’s basically hidden with the collapsed menu; I’d like instead to have it placed outside, on the left of the hamburger icon (see screenshot below).

Is there a way I could reach this aim?

Thanks!

[Rue NelModerator]

Hello There,

Thanks for writing in! To move the flag on mobile screens and place it next to the mobile icon, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .mobile .x-nav .lang-item-297{
    position: absolute;
    top: 15px;
    right: 70px;
}

Hope this helps.

[shortcoastParticipant]

Thanks!
I’ve applied that css code and it seems to affect the flag correctly but only once you click on the nav (hamburger) icon, not from the start.
Is there a way the flag could be moved from the beginning instead?
And I’d like also to have the english icon moved too: http://www.vinodiretto.it/it/

thanks!

[Rue NelModerator]

Hello There,

Please remove the custom css code and we’ll give another suggestion. Please do the following:
1] Please remove the given code from our previous reply.
2] Please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('<div id="lang-flag"></div>').insertBefore('.x-btn-navbar');
  $('.x-navbar .mobile .x-nav .lang-item a').appendTo('#lang-flag');
})(jQuery);

3] And then add the following css code in the customizer, Appearance > Customize > Custom > CSS

#lang-flag {
    display: none;
}

@media(max-width: 979px){
  #lang-flag {
   display: block;
   position: absolute;
   top: 35px;
   right: 70px;
  }
}

This code will work both with the UK and IT language flags.
Please let us know how it goes.

[shortcoastParticipant]

now it’s perfect, thanks!

[Prasant RaiModerator]

You are most welcome.

[Author]

Posts