Pro theme WPML language dropdown does not work

As per title, have browsed your forums, but almost exclusively information on X theme, not on Pro theme.

Please explain how to make dropdown language switcher working for the Pro theme, for now only list works, which is nice with one language, but worthless with more.

Hi @b-lynk,

Thank you for writing in, please navigate to WPML > Languages, and edit your Menu language switcher, select the Dropdown on the menu item style. You can also set it to have a flag only so it does not take to much space on the header.

More details here: Language Switcher Options

Hope it helps,
Cheers!

Hi, yes I know how adding language switchers with WPML works, thank you.

My specific problem is that the dropdown does not work. It does not drop down, seems like some kind of conflict.

I have tried adding the language switcher to a menu, to a widget (both in Header 2 that I purposed for this trial), but only the horizontal list works, the drop down does not.

Hey @b-lynk,

Have you tried using the Navigation Inline? Assign your menu with the Language Switcher in the Navigation Inline Setup.

Make sure you have translated the page for the language switcher to work.

Hope that helps.

Navigation Inline Setup?

And again, I know how WPML works, thank you.

The issue is related to the Pro theme and a non-functioning language switcher drop down.

Why are we wasting so much time going back and forth on this?

Hey @b-lynk,

Sorry for the lack of info. I thought you already knew how to setup a Navigation Inline element because you already have set up one in your header.

I recommended that you try the Navigation Inline element because WPML says that the Language Switcher will work with menus that supports drop-downs. The menu placed in a widget does not support a drop-down.

What I was saying is you just need to assign the language switcher menu in the Navigation Inline Setup. Please check the screenshot below taken from my previous screenshot.

-----------------------------------------------------------------------------------

I have executed the steps in your site and you now have a Language Switcher. Before that, I experienced a problem though. Details below.

I thought there is no issue with the language switcher setup until I logged in to your site and found that an empty menu will not show up in the Assign Menu dropdown in the Navigation Inline > Setup so what I did is I added 1 custom link in the language switcher menu and added the code below in the Navigation Inline’s Element CSS as a temporary workaround.

$el > .menu-item:first-child {
  display: none;
}

Please note that I do test in my test site first to ensure the issue is not a bug in our theme.

-----------------------------------------------------------------------------------

We’re sorry for the back and forth here. We don’t intend to do that or waste your time.

Hope that helps.

@christian_y thanks for your more elaborate reply this time.

I have checked the site using the “user verification success”-page, but I cannot see anything that even remotely resembles a functioning drop-down menu, please see my screenshot here:
https://monosnap.com/file/03kM4Q76fAcZgE7qSkgu7a6cQ5RV1d

Furthermore the additional test menu item is unacceptable to use as a solution, but we may overcome that by setting the WPML switcher as first menu item of that menu instead.

Also, this deals with adding the WPML language switcher to the site through the WP dashboard. You must be aware that a custom languages switcher can also be added directly in the (child)theme. However the Pro theme is put together in such a way that it unfortunately seems to become a monster task to figure out how to simply add a do_action('wpml_add_language_selector'); to the child theme. Any suggestion on that?

I have first tried adding it as first menu item to the langnav menu, but that had the same result as above screenshot.

I then went ahead to add it to the existing main navigation menu as first menu item and that all of a sudden works! screenshot

So now the question becomes, why does it only seem to work on the main navigation, which obviously in our case is way to long to add a language switcher at either end?

And the other question is how (where) to add the switcher programmatically?

Hey @b-lynk,

Regarding this:

You’re still using the Widget Area element. As detailed in my previous responses, use the Navigation Inline element.

Follow the setup I have done in your CH-MAIN-HOME Header please.

If you wish to use the do_action('wpml_add_language_selector'); in a child theme, please follow our customization guide here: https://theme.co/apex/forum/t/customizations-best-practices/205

Regarding your comment

Our themes were built using modern WordPress theming techniques. It’s hard for beginner or non-developers but it’s good for modern developers.

If you mean programatically display the dropdown language switcher in a Pro header, there is no way for that other than the method described above.

Thanks.

Finally got it working thanks to your informative instructions (…)

Still the dropdown is not working down. Well it is dropping down, but not functional as the submenu of the dropdown cannot be selected.

Hey @b-lynk,

I’m sorry I forgot to warn you about the z-index of the bar. Right now, your 2nd bar is covering your 1st bar invisibly because of the z-index. The z-index of your 1st bar where the language switcher was placed must be higher than the z-index of the 2nd bar. I’ve set this one in your User Verification Success now so you could see that this works.

You must do that for all your bars that have a menu with submenu. In the menu in your User Verification Success page, try going to Troubleshooting > Known Issues and you’ll also see this happening because the 3rd bar is invisibly covering the submenu of your 2nd bar. Set the 3rd bar’s z-index lower than the 2nd bar.

Once you know how z-index works, you’ll be able to achieve overlapped elements designs.

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.