[Support request] Add WPML Language Switcher to end of Primary Navigation

[Leon]

Hi Team,

This is the ideal language swicher appearance I’m trying to achieve (a globe icon and the current language). https://gengo.com/

WPML built-in language swithcher doesn’t offer an option to use a global icon for all languages, so I’m trying to achieve the above effect using WPML’s “custom language switcher” shortcode and Hook Element from GPP.

WPML guide: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/?utm_source=plugin&utm_medium=gui&utm_campaign=wpmlcore#custom-locations

But I never found a hook location that let me put it there after the primary navigation (as if the last item, and not after the whole primary nav, which will be displayed in another line)

Could you help?

Thank you!

[Fernando]

Hi Leon,

Try hooking it to generate_menu_bar_items.

If it doesn’t work, can share a link to the site in question?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Kindly let us know how it goes.

[Leon]

Hi Fernando,

I don’t see that hook. I’m using the latest version of GPP, but I’m not using Flexbox, which is probably the reason.

But if I switch to Flexbox, my webiste sort of changes layout for some areas and I had to investigate all my sites and find areas that are changed, so I’m trying not to switch to Flexbox.

Is it possible to achieve it based on my existing structure?

[Fernando]

I see. With your current structure, here’s a CSS you may try adding through Customize > Additional CSS:

@media(min-width: 769px) {
    nav .inside-navigation.grid-container.grid-parent {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
}

Side note: For reference, here’s an article with regards to switching to flexbox: https://docs.generatepress.com/article/switching-from-floats-to-flexbox/

[Leon]

It works for the hook. But it also put my navigation logo to after the menu items…

[Fernando]

How does it look like from your end? On Desktop, the logo is still on the left side, before the nav on my end: https://share.getcloudapp.com/qGuOn4Dj

On tablet, the logo is above the nav.

[Leon]

That’s right. I mean, the navigation menu. (you need to scrool down and up to see the menu)

[Fernando]

I see. Thank you for clarifying.

Can you try this CSS instead?:

@media(min-width: 769px) {
    nav .inside-navigation.grid-container.grid-parent {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    .navigation-branding {
        order: 5;
    }
}

[Leon]

Thank you. It’s working for desktop and pad. But for mobile, it’s still displaying incorrectly. The language switcher is somehow displayed to the left of the logo.

But on mobile, I’d like to display the language switcher either to the left of the menu icon, or to the bottom of the primary naviation items after clicking the menu icon.

Could you help on this? Thank you

[Fernando]

I see. Try adding this:

#mobile-header .site-logo.mobile-header-logo {
   order: -1;
}

[Leon]

This works for mobile. Thanks Fernando.

It’s just that the language switcher shortcode isn’t working on mobile. I’m only seeing an icon on mobile…

[Fernando]

Are you using the same shortcode added through an Element for mobile and desktop?

GeneratePress shouldn’t be hindering this shortcode from working. What specific hook are you using?

[Leon]

Yes the same shortcode. Generate_after_primary_menu hook. It’s a elementor template shortcode in the hook Element, which contains the design (icon to the left and WPML language switcher shortcode to the right).

[Fernando]

I see. It’s weird that it isn’t working for mobile. If you add solely the WPML shortcode, does it work?

[Leon]

Yes wierd. Anyway, I disabled the element on mobile and added the shortcode through off canvas panel, and achieved similar effect. Thank you for the help.

[Author]

Posts