[Support request] How to add language flag switcher to main menu?

[bluebit]

I’m searching for a way to add a dropdown like this to the generate press main menu https://www.templategenie.com/libs/images/whmcs-template-language-select-w-flags-eco.jpg

with flags and each flag is linked to a different site. I have an english site and a spanish site. So when person clicks on spanish flag they get directed to the spanish site, etc

I can’t seem to find a plugin that does this, all of them translate the website or add en, es etc to the url. I just want to link to another website that I own.

Possible to do this with custom code or i dont know.

[Leo]

Hi there,

That’s definitely plugin territory.

Maybe WPML or Polylang?

If you can link me to the example, I might be able to tell you what plugin they are using.

[bluebit]

I actually would like to add the flags without a plugin, just with custom code/php snippet if possible. Yes those plugins add the dropdown, but are buggy and add things that I don’t need. I just need a simple dropdown on the generatepress main menu with flags, no translation needed. Both menu flags are linked to two differente websites, one in english other in spanish.

[Lyle]

Timon –

One way to do so is add a Custom Link menu item.

In the URL field, add the link to the other site.

In the Navigation Label field, add the URL of your flag image like this: <img src="URL-of-flag" />

As you only have the two languages, there is no real need to have both 🙂 On the English site, you have the Spanish flag with the link to the Spanish site and vice versa 🙂

Cheers!
Lyle

[bluebit]

Dude Lyle you’re amazing, that’s exactly what i want to do, but just modify it a little bit more to make it look better, take a look: https://cryptomapa.co

How can I move the flag down into the correct position?

This is the current code im using:
ES

And the dropdown is super wide, it goes to the right too much when showing the USA flag, to much empty space too the right inside the dropdown menu. How to fix that?

I got custom php code snippet plugin and a custom css plugin to add code.

[Lyle]

Go to Appearance > Menus and select Screen Options (upper right) and tick the CSS Classes item. Then expand the menu item for the flags and give it a class name, for example, flags
Then add this CSS:

.flags {
     position: relative;
     top: 7px;
}

This CSS will narrow the drop down, but this version will do so for all drop downs. As you only have the one, this should be OK 🙂

.main-navigation ul ul {
    width: 105px;
}

[bluebit]

So the code you just gave me I assume I paste that in my custom css plugin? And for the css classes how do I do this? I’ve never done a css class before.

[bluebit]

oh i get it, let me try it

[bluebit]

Ok, take a look what happened: https://cryptomapa.co

The flag is now in perfect position, but ES got moved down as well, anyway to fix it or should i maybe upload the flag image png and add extra space on the top part of the flag image.

Also, when i hover my mouse over the menu item and menu dropdown the background color turns a lighter grey, how to disable that and only use the main menu bar color #222222

[Lyle]

Oops … I forgot to target just the image in the first block; should be:

.flags img {
     position: relative;
     top: 7px;
}

For the color, use the Customizer to change that … Colors > Primary Sub-Menu Navigation 🙂

[bluebit]

do you know how i can isolate the color to just that one menu item? because if i use the customizer it targets the background color for the entire menu items, can’t select them individually.

[Leo]

Which menu item specifically?

The Spanish or English?

[bluebit]

https://cryptomapa.co the menu item with the flags, both spanish and english flag, so just specifically for that dropdown menu item with the flags, no background color change on hover and when selected, just color #222222.

And make just this flags menu item/dropdown float to the right side edge of the main menu.

[Tom]

Give this a shot:

.main-navigation .main-nav li.flags:hover > a,
.main-navigation .main-nav li.flags.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu-"].flags > a {
    background-color: #222;
}

[bluebit]

take a look: https://cryptomapa.co

it partially worked, when you decide to hover from the flag to the Contacto menu item, it flashes light grey for a moment. Or if you first hover over the flag and then off it like to the map, it flashes grey for a sec.

[Author]

Posts