Language flag icon to be placed outside menu on mobile view

Support
#1

Hi there,

I have an issue which was discussed before in the old forum, but as the thread is already closed, i open it here again, as the suggested solution doesn’t work with my site.

I want to reach basically the same as you can find here:
https://theme.co/apex/forums/topic/language-flag-icon-to-be-placed-outside-menu-on-smartphone-view/

I inserted both codes (JS&CSS) as you suggested but it doesn’t work. I guess I have to define my language items/flags somehow.
http://vinodiretto.it/shots/flag1.jpg

Please have a look at my site. I will provide URL and credentials in the secure note.
Thank you!!! :slight_smile:

#2

Hi, there!

You’re using UberMenu. You could achieve the same result as the old snippet using the correct selectors on your UberMenu items.

(function($){
  $('<span id="lang-flag"></span>').insertBefore('div.ubermenu-responsive-toggle i.fa-bars');
  $('ul.ubermenu-nav li:last a').clone().appendTo('#lang-flag');
})(jQuery);

See that’s a starting point, then you can style #lang-flag as needed using ideas of the post you mentioned.

Hope it helps!

1 Like
#3

Thank you very much Rafael :slight_smile:

That was indeed a good starting point !
I was able to get the flag to desired place but as you can see on the screenshot it looks a bit misplaced there.
1.) I would like to move the flag to the very right side of the screen.
2.) when clicking on the flag,the menu rolls out, just same as the burger and image-logo.
How to direct link it to the chinese version of my page?
3.) Now the flags are doubled. One flag you see beside the logo, and when the menu rolls out the flag is showing again.
Possible to hide it in the (MOBIL)-menu?
Thanks again for your great support
Cheers
Maik

#4

Hi,

Please change the js code provided with this.

(function($){  
     $('<span id="lang-flag"></span>').insertAfter('.x-brand.text');  
     $('ul.ubermenu-nav li:last a').clone().appendTo('#lang-flag');
})(jQuery);

Then add this in Custom CSS

#lang-flag {
    display:none;
}
@media(max-width:1260px) {
#lang-flag {
    display:block;
    float:right;
}

.ubermenu-nav .ubermenu-item-877 {
    display:none;
}
}

Hope that helps.

1 Like
#5

Hi Paul and thx for your response!

I added the code you provided.

  • clickable flag works now. clicking on the flag links to the other language version thats great!
  • now I have 2 flags showing, 1 is enough. somehow the code:
    #lang-flag {
    display:none; doesn’t work.
  • even you wrote
    #lang-flag {
    display:block;
    float:right; the flag is floating to the left…

please see my screenshots

but we are almost there :slight_smile: thanks again!!!
Maik

#6

Hi there,

There was no problem with the code snippet given by my colleague. The problem was from the snippet before the one you added in the options panel:

You used a media query but did not close the bracket. I closed that and the snippet is working ok now.

It is highly recommended that you get familiar with CSS tweaking to avoid relying on us to do such customizations. I suggest that you start with:

Hope it helps.

1 Like
#7

Hi Christopher!

Thank you very much it looks awesome now.

One little thing I tried, didn’t work.

When clicking on the mobile-menu-burger-logo on the Chinese version of the site (when you see the british flag)
The British flag is still on mobile menu rollout (so there are still 2 flags to see)

I added the #lang-flag class to the uber-menu item of the British flag (#menu-item-905)
and then added
.ubermenu-nav .ubermenu-item-905 {
display:none;
}

**But then the menu-item (british-flag) disappeared also from the desktop view. **
What did i do wrong?

Many thx again! Also for the Video Tutorials. I will definitely look at them and try to improve my css skills :slight_smile:

Best regrds

Maik

#8

Hi Maik,

Please use instead the same code inside a media query, so you will use :

@media(max-width: 969px)  {
.ubermenu-nav .ubermenu-item-905 {
display:none;
}}

Hope it helps

1 Like
#9

You are awesome ! :heart:
Thank you!

#10

Thanks for good words. :slight_smile: