Polylang Language Switcher widget in headerarea missfit

[apa-sl]

We are using Polylang plug-in for multi language on our website http://www.audit24.pl

The only problem that we have is that we need to have a language switcher in the header menu. We have added there Polylang’s ‘Language Switcher’ widget but it is not displaying properly in the menu (menu get’s bigger and the hamburger menu is on top of the switcher). Is the switcher to big? Can we modify it somehow?

[Veena]

You can use the below custom CSS in themeoptions –

#sidebar-header aside#polylang-2 {
    padding-right: 30px;
}
#sidebar-header aside#polylang-2 select {
    max-width: 100px;
}

[apa-sl]

Thank you, it helped (i’ve also added 25px of top margin to align it vertically) but there are 2 issues left:

1) when user is scrolling down the page and the top menu bar is getting vertically smaller, all elements are re-centred but the language switcher widget stays at the same height. I’ve tried to use here valign: middle but it didn’t helped.

2) on mobile any widget visible in the top menu bar widget area is placed in the 2nd line of the menu. But in case of language switcher the widget is not centered horizontally under the website logotype (as ie. your social media widget that we have used at http://www.elimiapp.com).

[Veena]

1. Pls use the below custom CSS –

#header.sticky aside#polylang-2 {
    padding-top: 10px;
}

2. You can use the below custom CSS –

@media only screen and (max-width: 767px){
#sidebar-header aside#polylang-2 {
    margin: 0 auto;
    display: inline-block;
}}

[apa-sl]

Great, thank you!

Last thing regarding this widget: when header is in sticky mode on a web browser (not mobile) I can see that it is higher with this widget than without it despite that there is plenty of free space at the bottom of the header.

P.S.
I think that it would be good to include formatting corrections for Polylang widget in the theme. This multilang pluign is getting more and more popular (+100k installs) and it’s great.

Edit:
P.P.S.
Argh! When I’ve removed the widget to test the header height in normal and sticky mode with and without the widget and added it again to the header all the custom css for this widget stopped working (tried to remove custom CSS, reload, add custom CSS again and reload).

Edit2:
P.P.S.2
OK number of the object (widget) is being incremented after each delete/add. Now it’s OK

[Veena]

Last thing regarding this widget: when header is in sticky mode on a web browser (not mobile) I can see that it is higher with this widget than without it despite that there is plenty of free space at the bottom of the header –

Actually i don’t see any issue .
Can you pls clarify the query, a screenshot of the same will help understand better .

Thanks .

[Author]

Posts