Wordpress How to display Polylang language switcher near hamburger menu on mobile view

How to display Polylang language switcher near hamburger menu on mobile view

2087
7

Polylang custom language switcher positioning on mobile view

Hey guys!

In this article, I’ll show you how to display a Polylang language switcher in a custom place, specific under the hamburger menu icon on the mobile and tablet views like it’s showed on the image below:

If you’d like to show a Polylang language switcher in a custom place without using any additional widgets, there is a simple PHP code that you need to add to your WordPress theme file:

<?php pll_the_languages();?>

Let’s say you want to display the Polylang language switcher below the hamburger menu icon on the mobile version of your WordPress website.

In this case, you will need to paste the code in your header.php file just above your closing </header> tag

<ul id="mob-lang-switch"><?php pll_the_languages(array('dropdown'=>1)); ?></ul>

As you can mention I used a little bit different code in order to display a drop-down view of the language switcher.

Below you can find the exact code for adding to your header.php file

<ul id="mob-lang-switch"><?php pll_the_languages(array('dropdown'=>1)); ?></ul>

I also used the #id selector in order to modify the appearance and to display the language switcher just on the mobile and tablet view

@media all and (min-width:980px){
#mob-lang-switch{
display: none!important;
}
}

@media all and (max-width:980px){
.menu-item-326{
display: none!important;
}
}

.menu-item-326 is the language switcher that is shown on the desktop only

Just don’t forget to inspect your .menu-item class and make sure what’s the exact class you have.

The final result on mobile view looks like on the image below

 

Previous articleApple reaches $1,000,000,000,000 value
Next articleThe 9 Word Email Hack That Revives Dead Leads

7 COMMENTS

  1. For those that are wondering why this isnt working, its likely because you are using the theme-header.php file on divi. Just insert the same code into the file.

  2. Hi, I tried so many times this code, but it doesn’t work for me 🙁
    I use divi builder and I use a global header.
    In mobile version, the switcher hiddes from the menu, but doesn’t appear under de hamburger.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.