1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Polylang language switcher next to hamburger icon on MOBILE MENU

Discussion in 'Free Divi Community Forum' started by Zoozie, Dec 16, 2024.

  1. Zoozie

    Zoozie New Member

    Hello everyone,

    could someone please tell me how to remove the language switcher from the dropdown menu on mobile and put it instead to the main menu to the left to the hamburger icon? I am using Polylang plugin.

    My URL is https://www.janjares.cz

    Thank you for your ideas :)

    polylang-mobile-menu.jpg
     
    #1 Zoozie, Dec 16, 2024
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  2. Divi Booster

    Divi Booster Divi Expert

    Hey Zoozie,

    One way to do it would be to register a new menu location in the Divi header, place the language switcher in its own WordPress menu, and assign that menu to the new menu location. This post has the necessary code to register and style the menu location:

    https://divibooster.com/adding-a-second-menu-in-the-main-divi-header/

    I hope it helps, but give me a shout if you have any questions about it.
     
    #2 Divi Booster, Dec 16, 2024
  3. regoczyzoli

    regoczyzoli New Member

    Hi, I implemented this and works just fine. My only problem is that if I click the hamburger icon, the top menu is displayed twice, but the primary menu is not. Can you help?
     
    #3 regoczyzoli, Feb 10, 2025
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  4. Zoozie

    Zoozie New Member



    Hi there, thank you very much for your solution, I will try it and let you know :)
    Zuzana
     
    #4 Zoozie, Feb 10, 2025
    Divi Booster likes this.
  5. Divi Booster

    Divi Booster Divi Expert

    Hey regoczyzoli, any chance you're able to share a link to the page you're working on so that I can take a look?
     
    #5 Divi Booster, Feb 10, 2025
    1. PRO MEMBER PERKS Divi Block Pro - Premade gallery carousel design for your Divi site without using any plugins:View Demo
  6. regoczyzoli

    regoczyzoli New Member

    Sure, here it is: https://www.szentkristofpanzio.com/
     
    #6 regoczyzoli, Feb 10, 2025
  7. regoczyzoli

    regoczyzoli New Member

    #7 regoczyzoli, Feb 14, 2025
    1. PRO MEMBER PERKS Divi Block Pro - Premade promo bar / notification bar with close button for your Divi site without using any plugins:View Demo
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    For a quick fix, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #8 Divi.Help, Feb 14, 2025
  9. regoczyzoli

    regoczyzoli New Member

    Well, it works perfectly now. Thank you very much for jour help! :)
     
    #9 regoczyzoli, Feb 15, 2025
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  10. Foute

    Foute New Member

    Divi booster, mayby you can help me out to?
    I have added the above but these last steps don't work? ( "My Custom Menu" don't show)

    "4. Assign your Menu
    With this in place, you can now assign a menu to the "My Custom Menu" location in the WordPress menu settings, at:

    WP Admin > Appearance > Menus

    You're menu should now show up in the second menu spot we've added to the default Divi header."

    Maybe it's not working because i'm using a global header with a full width menu?
    This is the website I'm testing this on: web.ifixit.nl
    Thanks in advance,
    Marcel
     
    #10 Foute, Jan 11, 2026
  11. Foute

    Foute New Member

    Update: Now the "My Custom Menu" is visible so i think it's gonna work:)
     
    #11 Foute, Jan 12, 2026
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More
  12. Divi Booster

    Divi Booster Divi Expert

    Hey Foute,

    The steps in that post won't really help with adding a second menu to your global header - it's designed for the default header and doesn't translate very easily to the menu module in a global header.

    What I'd suggest doing instead is adding the language picker to a text module using a shortcode. Then you can place this text module next to your menu module, so the language picker appears beside, not in, your menu on both desktop and mobile. If you want the picker to be to the right of the menu on desktop and to the left of the hamburger on mobile, maybe add two such text modules and hide one on mobile and hide the other on desktop.

    One slight complication with this is that Polylang itself doesn't seem to provide a shortcode for the language picker, but it should be easy to register the shortcode with a bit of PHP code. This thread offers several variations - hopefully one meets your needs:

    https://gist.github.com/taninbkk/f95281b44b3762435777

    Hope that helps!
     
    #12 Divi Booster, Jan 13, 2026
  13. Foute

    Foute New Member

    Dan thanks for looking into it and replying

    On of the nice people at 'Divi Elegant themes' provided me with this peace of code and it works beautifully!

    Add this code to the Divi → Theme Options → Integration → <head> block:

    <script>
    jQuery(document).ready(function ($) {
    function moveLangItem() {
    if (window.innerWidth <= 980) {
    $('.et_pb_fullwidth_menu').each(function () {
    const $menu = $(this);
    const $langItem = $menu.find('.et_mobile_menu .lang-item');
    const $mobileBar = $menu.find('.mobile_menu_bar');
    if ($langItem.length && $mobileBar.length && !$menu.find('.mobile-lang-item').length) {
    $langItem
    .clone(true)
    .addClass('mobile-lang-item')
    .insertAfter($mobileBar);
    $langItem.remove();
    }
    });
    }
    }
    moveLangItem();
    $(window).on('resize', moveLangItem);
    });
    </script>

    And this code to the Custom CSS field in Theme Options.

    @Media (max-width: 980px){
    li.lang-item {
    list-style: none;
    }
    .mobile_nav {
    display: flex;
    align-items: center;
    }
    li.lang-item a {
    display: flex;
    margin-top: 5px;
    }}
     

    Attached Files:

    #13 Foute, Jan 13, 2026
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo
  14. Divi Booster

    Divi Booster Divi Expert

    Awesome! Thanks for sharing the solution :)
     
    #14 Divi Booster, Jan 14, 2026
(You must log in or sign up to post here.)