Add flags to the header.

Hi,

You can use [gtranslate] shortcode to display it anywhere on your website.

If your header is a menu, you can add Shortcode in Menus plugin to enable shortcode execution in menus.

Thanks! ??

Hello,

Thank you. The flags are already displayed in the header menu.

The problem is two things:

1. Flags are displayed at the end of the menu, not at the end of the header itself, which contains additional elements added by the template. This could be solved here with CSS, because the elements in the header are just a list of <li> elements. But I don’t know how to change their order, please?

2. Flags are displayed below each other, not next to each other. Not only does it look clearer side by side, but most importantly, it increases the overall height of the head. But can it be changed, please?

Thank you

PS. More on the web where I tested it. – https://testtheme.euweb.cz/

UDPATE

1. So I managed to partially solve the problem with this code.

ul#primary-menu li:nth-child(4){
  order: 1;
}

The problem is that this code is completely dependent on the number of elements. If I add another item to the menu, it will no longer apply.

2. This is obviously at the level of the plugin itself. Will you have to tell me how to make the flags appear side by side, please?

UPDATE:

I’ve figured it out.

1. To place an element at the end of a list, you only need to know the id.

$("#menu-item-1124").appendTo("#primary-menu");

2. Flags are only a list <a> in <li>. Therefore, you only need to adjust their display.

$("#primary-menu > li > a").css("display", "inline-block");

Then it is still possible to add spaces so that the flags are not crammed side by side.

$("#menu-item-1124 > a").css("padding-right", "10px");

Thank you anyway.

Hi,

That is great.

I notice that you do CSS adjustments using js, which is not executed before the page is loaded, so for some moment you can see the flags on top of each other.

I would suggest you to do that via CSS.

#menu-item-1124 > a {padding-right:10px !important;display:inline-block !important;}

Thanks! ??