Customize Polylang Language Switcher

[María]

I would like to know what’s the best way to customize the language switcher if I’m using the free version of Polylang.
As you can see in the attached link we already use the dropdown option. We still want to add the rectangle around the current language and change the background color of the dropdown menu too, like on this site https://nfclinguistic.com/

Thank you

GeneratePress 2.2.2

GP Premium 1.8.1

[Leo]

Hi there,

This should help for the border:
https://docs.generatepress.com/article/adding-buttons-navigation/

Submenu colors are included in the customizer:
https://docs.generatepress.com/article/colors-overview/

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[María]

Hi Leo, thanks for the reply. I understand how it works, just cannot think of a way to make it work for the Language Switcher. It’s the only menu item that doesn’t include the CSS Classes field. All the other items are added to menu via the “Pages” option on the left, but the Language Switcher acts as a Custom link. Is there a way to add a custom class to the Language Switcher in this case?

[Leo]

So did you add the language switcher as a menu item using a custom link?

You can definitely add CSS class to a custom link:
https://www.screencast.com/t/1PvKOdAktXT

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[María]

I added the language switcher using this “language switcher” metabox that came up on the menu on the left after I installed Polylang. The list of menu items shows it as a custom link, but with specific “language switcher” settings.
Here’s the screenshot that shows it https://drive.google.com/file/d/1kJQVTyg1ilKQAxOWCxuDBifW7z3LQ9Pz/view?usp=sharing

Tried this link from their documentation but still cant figure it out https://polylang.wordpress.com/documentation/frequently-asked-questions/the-language-switcher/

[Leo]

Just to make sure…CSS classes is checked in screen options?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[María]

Yes, CSS classes is checked. I managed to add it to the home menu item for example

[Leo]

Ahh looks like it already has a custom class added.

Try this:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.pll-parent-menu-item > a {
        background-color: #ffffff;
        border: 2px solid #000000;
        color: #000000;
        line-height: 35px; /*this number will likely need to be adjusted*/
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[María]

Thanks a lot Leo. That works! However, it changes the style of both the current language and the dropdown menu. Is there a way to only add the border to the current language and not for the submenu? If you can please take a look at the link you can check how it looks now and see what I mean.

[Leo]

Adjusted the CSS above:
https://generatepress.com/forums/topic/customize-polylang-language-switcher/#post-880849

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[María]

Yes, perfect! Thank you Leo

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts