Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support How to add language flag switcher to main menu?

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #436048
    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.

    GP Premium 1.5.5
    #436433
    Leo
    Staff
    Customer Support

    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.

    #438236
    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.

    #438370
    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

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #439139
    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.

    #439159
    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;
    }

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #439166
    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.

    #439167
    bluebit

    oh i get it, let me try it

    #439172
    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

    #439196
    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 🙂

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #439229
    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.

    #439242
    Leo
    Staff
    Customer Support

    Which menu item specifically?

    The Spanish or English?

    #439259
    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.

    #439269
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #439272
    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.

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.