Polylang flags

[Goran Milic]

Hello Bill,

Since I tried WPML plugin and found it very complicated for me, I have switched to Polylang which is easier to use for me and looks a little bit more lightweight.

Anyhow there is a widget for flags, and I would like to put that widget on top of the menu, and under the logo. Sorry I know I had the same question for WPML and you helped me before, but somehow I am not able to do the same thing with new plugin.

While I am positioning that widget in section under the logo, I would like to align the flags horizontally. This is what they say in Polylang documentation:

How to display the widget flags horizontally?

The appearance of your site is controlled by CSS rules placed in the file style.css in your theme directory. The appearance of the language switcher is controlled by the classes “lang-item” for all languages and “current-lang-item” for the current language.
So you can add the following lines in style.css

.lang-item {
display: inline;
}

Thank you in advance for giving me the line for CSS to move the widget on top of the menu and put it inline.

[Bill Robbins]

Hi Goran,

Try adding this to the Custom CSS box in the Advanced tab of your theme options page:

li.lang-item {
	display: inline-block;
}

@media only screen and (min-width: 768px) {

	.widget_polylang {
		position: absolute;
		top: 170px;
		left: 0;
		right: 0;
		margin: 0;
	}
	
	.widget_polylang ul {
		margin: 0;
	}
	
	#sidebar nav {
		margin-top: 30px;
	}

}

See how that works for you,
Bill

[Goran Milic]

Bill I have just tried, but nothings changed. Everything is the completely the same.

On Polylang forums they recommended someone to add this:

#sidebar ul ul li.lang-item {
background-image: none;
display: inline;
}

Maybe this gives you some idea…

[Bill Robbins]

In your Custom CSS there is a style that’s missing the closing bracket. That keeps any code below it from working. Remove these:

#sidebar .lang_sel_list_horizontal ul li {
	display: inline-block;
	float: none;

#lang-item {
    display: inline;
}

[Goran Milic]

Great as always Bill, thank you very much.
One more thing, if you visit the website from mobile phone you will get the flags under the menu.

[Bill Robbins]

Glad that worked. They need need to stay under the menu on mobile since their distance from the top of the screen will be variable.

Take care,
Bill

[Goran Milic]

Thank you Bill. Have a nice day.

[Bill Robbins]

You too Goran 🙂

[Author]

Posts