Weglot - Country Flag not visible in main menu

[dmuller]

Hi, hopefully this is an easy fix. I’m using the excellent Weglo plugin (please consider supporting it, it’s superb at what it does).

No problems hooking it all into PRO at this point other than the country flag not showing on the main menu option (although in the mobile/ hamburger menu it shows up just fine).

[prakash_s]

Hello @dmuller,

Thanks for writing to us.

You display the flag icon by using custom CSS code. You need to add this CSS code and then adjust the menu item padding as well.

.x-menu-inline>li {
    display: initial;
} 

The code output would be like this, please have a look at the screenshot in the secure note.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector. Please note that we don’t provide any third-party plugin support. It is out of the support scope.

Hope it helps.
Thanks for understanding

[dmuller]

Sterling work as always. Many thanks.

Only one issue: the particle animation (darker blue swipe) is the full height of the blue bar without the CSS and only the height of the text contained within with the CSS.

Is there a way to retain the original look please?

[tristup]

Hi @dmuller,

Glad that we are able to help you, you need to add the given code only for the Weglot menu item your code should look like the following one.

.x-menu-inline >li.weglot-lang
{
    display: initial;
}

Please remember that the flag is not maintaining the structure of the menu, so the hover background color issue will persist with the menu item.

Hope it helps.
Thanks

[dmuller]

Helped a lot, I can hide the particle for the flag anyway (it wasn’t desired for that icon) like this:

.x-menu-inline >li.weglot-lang {
display: initial;
margin-top: 7px;
}

.x-menu > li.weglot-lang > .x-anchor > .is-primary {
color: transparent!important;
}

Thanks a lot Tristup.

[tristup]

Hi @dmuller,

Glad that we are able to help you.

Thanks