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

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

Home Forums Support WPML language switcher near hamburger menu on mobile view

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #701610
    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
    #701744
    Tom
    Lead Developer
    Lead Developer

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

    #702638
    Tom
    Lead Developer
    Lead Developer

    Ah sorry, you’re using the mobile header.

    Use the inside_mobile_header hook instead.

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

    #703420
    Tom
    Lead Developer
    Lead Developer

    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?

    #703871
    Marc Nevens

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

    #704359
    Tom
    Lead Developer
    Lead Developer

    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.

    #708486
    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?

    #708665
    Tom
    Lead Developer
    Lead Developer

    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.

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

    #969660
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

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