Menu Display Issue with Plugin PolyLang

17 Posts

zzGreg posted this 21 November 2016

Hi,

I have a project where I need to have the web site display in two languages: French and English. I would like to use the WordPress plugin because it is mature, relatively popular (over 200K downloads), and well liked (4.5+/5).

The PolyLang plugin provides a widget called "Language Switcher". Once pages and menus have been created to support multiple languages, this widget allows visitors to click on the language that they want so see the site displayed in. The PolyLang Language widget has the following options (in the WordPress admin):

Selecting the options that I have chosen, and adding the Language Switcher widget to my main navigation menu, I was expecting to see flags (images) added to the menu that would allow a visitor to switch between the French and English pages we have set up. Instead, we get this...

...which works: clicking on the "Language Switcher" link in the menu toggles between the French and English pages we have set up, as it should. However, having a menu item called, "Language Switcher" on our menu is not acceptable. Based on the widget configuration in Wordpress, we should be seeing two flag images/buttons at the far right side of our menu: one for English and one for French.

When I checked PolyLang support documentation I found the following:

Some themes don’t use the orignal menu walker provided by WordPress but a custom menu walker to display navigation menus. It is quite frequent that theme developers forget that plugins can add images in menu items and thus create custom walkers which do not interpret the html code used by Polylang to display flags.

So, my questions to Themler Support are: Can I use PolyLang with Themler AND get it to display properly on my Primary Navigation Menus? If yes, how do I do this? I will provide access to my back end in a private message.

My questions to the Themler community are: How do you guys support multilingual WordPress sites (I do not need to do translation, just provide the structure)? Is anyone using PolyLang with Themler successfully? If so, how are you doing it?

Thanks,
Greg

Hi, I have a project where I need to have the web site display in two languages: French and English. I would like to use the WordPress plugin because it is mature, relatively popular (over 200K downloads), and well liked (4.5+/5). The PolyLang plugin provides a widget called "Language Switcher". Once pages and menus have been created to support multiple languages, this widget allows visitors to click on the language that they want so see the site displayed in. The PolyLang Language widget has the following options (in the WordPress admin): ![enter image description here][1] Selecting the options that I have chosen, and adding the Language Switcher widget to my main navigation menu, I was expecting to see flags (images) added to the menu that would allow a visitor to switch between the French and English pages we have set up. Instead, we get this... ![enter image description here][2] [1]: https://i.imgsafe.org/36b3a1e618.jpg [2]: https://i.imgsafe.org/36cf443ea1.jpg ...which works: clicking on the "Language Switcher" link in the menu toggles between the French and English pages we have set up, as it should. However, having a menu item called, "Language Switcher" on our menu is not acceptable. Based on the widget configuration in Wordpress, we *should* be seeing two flag images/buttons at the far right side of our menu: one for English and one for French. When I checked PolyLang support documentation I found the following: *Some themes don’t use the orignal menu walker provided by WordPress but a custom menu walker to display navigation menus. It is quite frequent that theme developers forget that plugins can add images in menu items and thus create custom walkers which do not interpret the html code used by Polylang to display flags.* So, my questions to Themler Support are: Can I use PolyLang with Themler AND get it to display properly on my Primary Navigation Menus? If yes, how do I do this? I will provide access to my back end in a private message. My questions to the Themler community are: How do you guys support multilingual WordPress sites (I do not need to do translation, just provide the structure)? Is anyone using PolyLang with Themler successfully? If so, how are you doing it? Thanks, Greg

Last edited 21 November 2016 by zzGreg

menu wordpress display polylang

Vote to pay developers attention to this features or issue.

6 Comments

Order By: Standard | Newest

17 Posts

zzGreg posted this 22 November 2016

The only thing I haven't yet figured out is why my custom CSS for the PolyLan feature (which I input into sytle.css, from Themler's Home>Settings>Additional CSS) is not working.

Just in case anyone else has issues with this, I have found that removing the PolyLang Language Switcher from my menu widget and creating a completely separate widget and placing that new widget beside my menu got me the most of the result I wanted: the Themler menu formatting is not affecting/conflicting with the Language Switcher formatting. The only thing I haven't yet figured out is why my custom CSS for the PolyLan feature (which I input into sytle.css, from Themler's Home>Settings>Additional CSS) is not working.

Support Team posted this 23 November 2016

Hello Greg,
I sorry for delay in response.
That's correct solution that you set up the Language switcher as separate widget.

As for custom CSS, I see that there's pretty mush custom CSS is used. Which one is not applied? And what page demonstrates the issue?

Regards
Aileen

Hello Greg, I sorry for delay in response. That's correct solution that you set up the Language switcher as separate widget. As for custom CSS, I see that there's pretty mush custom CSS is used. Which one is not applied? And what page demonstrates the issue? Regards Aileen

17 Posts

zzGreg posted this 23 November 2016

PolyLang support provides custom CSS for removing bullets:

.lang-item { list-style: none;}

This did not work for me.

However, adding this line to Home>Settings>Additional CSS, removed 1 of 2 bullets:

.LS_Widget{list-style: none;}

where, "LS_Widget" is is the name of the class for the new widget I created, using a free Wordpress plugin called, WP Custom Widget area

Aileen, thanks for looking into my issue. To respond to your question, here is what my Language Switcher widget looked like BEFORE I added the correct CSS to remove the bullet that comes from PolyLang (the round one on the left is from PolyLang)

Adding the correct CSS to remove the PolyLang bullet, makes the widget look like this:

The second bullet (which is formatted as a triagle) DOES NOT come from PolyLang (it took me a while to figure this out). It comes from my Themler Shortcode formatting. Other than changing the colour of the icon to blend into the blue background, I have not been able to figure out how to remove this bullet, BUT... I think it looks good, so I am going to leave it.

Hopefully the information shared here will save time for someone else who wants to use PolyLang with Themler. :)

[PolyLang support][1] provides custom CSS for removing bullets: .lang-item { list-style: none;} This did *not* work for me. However, adding this line to Home>Settings>Additional CSS, removed 1 of 2 bullets: .LS_Widget{list-style: none;} where, "LS_Widget" is is the name of the class for the new widget I created, using a free Wordpress plugin called, [WP Custom Widget area][2] Aileen, thanks for looking into my issue. To respond to your question, here is what my Language Switcher widget looked like BEFORE I added the correct CSS to remove the bullet that comes from PolyLang (the round one on the left is from PolyLang) ![enter image description here][3] Adding the correct CSS to remove the PolyLang bullet, makes the widget look like this: ![enter image description here][4] The second bullet (which is formatted as a triagle) DOES NOT come from PolyLang (it took me a while to figure this out). It comes from my Themler Shortcode formatting. Other than changing the colour of the icon to blend into the blue background, I have not been able to figure out how to remove this bullet, BUT... I think it looks good, so I am going to leave it. Hopefully the information shared here will save time for someone else who wants to use PolyLang with Themler. :) [1]: https://polylang.pro/doc/how-to-remove-bullets-in-front-of-the-flags/ [2]: https://en-ca.wordpress.org/plugins/wp-custom-widget-area/ [3]: http://i.imgsafe.org/5c12046f23.jpg [4]: http://i.imgsafe.org/5c1e0d7d12.jpg

Last edited 23 November 2016 by zzGreg

Support Team posted this 24 November 2016

Hi,

Indeed, the triangle looks good. I believe that it can be removed in the Themler settings somewhere. Let us know if you decide to remove it so we could try.

Sincerely,
Hella

Hi, Indeed, the triangle looks good. I believe that it can be removed in the Themler settings somewhere. Let us know if you decide to remove it so we could try. Sincerely, Hella

12 Posts

Gwe Cambrian Web posted this 14 March 2017

I would like to add my input here in that unfortunately that is not really a subletio, but a workaround.

Could someone at Themler address the points raised with regards to non standard menu walker issue, and whether this can be addressed?

Many thanks,

I would like to add my input here in that unfortunately that is not really a subletio, but a workaround. Could someone at Themler address the points raised with regards to non standard menu walker issue, and whether this can be addressed? Many thanks, E

Support Team posted this 16 March 2017

Hello,
yes, I agree that this is the workaround. But due to specific of Themler themes layout the bullet lists are used in certain cases. And the reported one is one of bullet lists. The standard approach if bullet list should be used but be displayed without list icons is to hide the icons. We may consider it as wide used workaround or possible solution.
I may say that the layout of menu, language switcher and other controls where bullet list is used won't be changed in Themler.

regards,
Aileen

Hello, yes, I agree that this is the workaround. But due to specific of Themler themes layout the bullet lists are used in certain cases. And the reported one is one of bullet lists. The standard approach if bullet list should be used but be displayed without list icons is to hide the icons. We may consider it as wide used workaround or possible solution. I may say that the layout of menu, language switcher and other controls where bullet list is used won't be changed in Themler. regards, Aileen

You must log in or register to leave comments