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