[Support request] WPML language switcher near hamburger menu on mobile view

[Marc Nevens]

Hello,

In the mobile view I like to have a language switcher near the hamburger icon, and not in de roll out menu.
I installed the WPML plugin with extensions.
How could I do that?

GeneratePress 2.1.4

[Tom]

Hi there,

It would be possible to add it inside a hook using our Elements module, but we’d need to know what WPML function to call.

According to this topic, we can use this:

do_action('wpml_add_language_selector');

So, we can try this:

1. Add a new “Hook” element in “Appearance > Elements”.
2. In the hook content, add this:

<div class="mobile-bar-items">
    <?php do_action('wpml_add_language_selector'); ?>
</div>

3. In the hook settings, choose the inside_navigation hook, and execute PHP.

4. Set the Display Rules to “Entire Site” and publish.

Now we can hide the current menu item on mobile with this CSS:

.main-navigation.toggled .wpml-ls-item {
    display: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marc Nevens]

Hello,
thank you for your quick reply.
I made the new hook like described in your message, but language switcher is not showing up.
My website url is https://hdm.undeployed.be

[Tom]

Ah sorry, you’re using the mobile header.

Use the inside_mobile_header hook instead.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marc Nevens]

Hi Tom,

I tried to change the hook location to inside_mobile_header, but without any result.
I still see the language switcher in the side-out menu, and not near the hamburger menu.

Regards,

Marc

[Tom]

Ah, the code is there now. However, it’s hidden because it’s actually a dropdown menu (obviously, as seen on desktop). I’m not sure how this would work on mobile? How would the user choose from different languages?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marc Nevens]

Hi Tom,
the user will tap on the language icon, and will chose is prefered language in the dropdown menu.

[Tom]

Currently, that would require some decent javascript coding.

I wonder if WPML has something built in where you can call a function that outputs a dropdown? Might be worth asking them.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marc Nevens]

Hello,

I could put the language switcher in the mobile header, but he will not show up in the mobile view. You could see it. I put the code in a div tag with a red background. Is this a css problem, that the selector won’t shop up?

[Tom]

I’m not seeing the code anymore – did you remove it?

It wasn’t displaying because <ul> elements are hidden by default in the mobile header. The reason we didn’t display them is that they would have displayed as an unordered list (not a dropdown) and messed up the element.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[liorsade8]

hi
any news on this?
i really need in multi language sites the option to change between language in the mobile header menu
mobile bar…
please update.
thanks

[Tom]

Hi there,

I don’t have any updates, but I’ll reach out to WPML to see if there’s something we can do.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts