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

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
Hi, great info. Been looking for this. Just didn’t understand where should I put the css. In wht php file?
Hey Tam! Thanks for reaching out. Yeah, just add it to your style.css file.
Cheers,
Alex
Is it Still Working, I am using Newspaper theme but it is not working there…
Hey Ankush!
Yeah, still use it on one of my websites on Divi theme
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.
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.
do you fix it?