WPML language switcher near hamburger menu on mobile view

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

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

Ah sorry, you're using the mobile header.

Use the inside_mobile_header hook instead.

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

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?

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

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.

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?

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.

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

Hi there,

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