Language switcher mobile collapsing nested menu items (secondary languages)

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 6 replies, has 3 voices.

Last updated by sabineH-5 4 years, 11 months ago.

Assisted by: Mihai Apetrei.

Author	Posts
April 21, 2020 at 10:33 pm #5963331
danielH-28	Hi, on the mobile menu the language switcher is too present as all language are visible by default. What i would like to achieve is something like in this post hidden link where the secondary menu items are not visible in first place and can be revealed when clicking on the "+" sign at the right side of the primary / current language or menu item. How can I achieve this with the wpml language switcher? is there some way I can set the css classes for the current site language (in the screenshot en) and the other languages (fr, nl & de) which will be on the secondary menu level below? Kind regards, Daniel
April 22, 2020 at 5:13 pm #5970997
Mihai Apetrei Supporter Languages: English (English ) Timezone: Europe/Bucharest (GMT+03:00)	Hi and thank you for contacting WPML Support! I will be happy to help you with this. First of all, thank you very much for your patience and sorry to have you waiting - there is a very full ticket queue at the moment and it takes us a bit more than usual to answer tickets. Now, regarding your request, it should show as a dropdown if you selected that in the language switcher settings (https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/). If you already selected the language switcher to show as dropdown but it still doesn't work on mobile, it means that somehow the theme is overwriting that. Please let me know what you will be able to find. I will be waiting for your answer. Kind regards, Mihai Apetrei
April 22, 2020 at 5:50 pm #5971111
danielH-28	Hi Mihai, thank you for your feedback and don't bother about waiting time - I still have some time before the release of the site 😉 I indeed use the dropdown menu item style in the option screen. In the desktop version it is as well presenting as a dropdown. Nevertheless on mobile it does not work. The site is still in development and therefore behind a coming soon page but you can have a look here hidden link . Kind regards, Daniel
April 23, 2020 at 2:47 pm #5978371
Mihai Apetrei Supporter Languages: English (English ) Timezone: Europe/Bucharest (GMT+03:00)	Hi Daniel and thank you for your response. From what I can see, the settings are correct so the theme that you are using is somehow overwriting our CSS and that is why the language switcher doesn't work on our site that is using this theme but it works on a site that is using a WordPress-default theme (like Twentyseventeen). There are 2 things you can try: 1. Get in touch with the theme support and maybe they have a quick solution for this 2. Try to use this kind of custom language switcher implementation: - https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#custom-locations - https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/ Kind regards, Mihai Apetrei
May 5, 2020 at 1:50 pm #6062219
sabineH-5	I have exactly the same problem an no answer. Do you use Divi? Did you find a solution yet?
May 7, 2020 at 10:14 am #6078323
sabineH-5	I found a solution for Collapsing the Language Switcher in the Divi Mobile Menu: Just add the following script to Divi > Theme Options > Integration / Head of your Blog <script> jQuery(document).ready(function(){ jQuery(".menu-item-language.menu-item-has-children").addClass('first-level'); jQuery(".menu-item-language .sub-menu li").addClass('second-level'); jQuery('.menu-item-language.menu-item-has-children a[title="EN"]').click(function(event){ event.preventDefault(); }); }); </script>
May 12, 2020 at 4:05 pm #6114801
sabineH-5	Correction to my last postinig: This is the correct Script, just add it to the Head of your Blog: <script> jQuery(document).ready(function(){ jQuery("#mobile_menu .menu-item-language.menu-item-has-children").addClass('first-level'); jQuery("#mobile_menu .menu-item-language .sub-menu li").addClass('second-level'); jQuery('#mobile_menu .menu-item-language.menu-item-has-children a[title="EN"]').click(function(event){ event.preventDefault(); }); }); </script> <script> jQuery( document ).ready(function() { jQuery( "ul.sub-menu li.menu-item-language" ).addClass( "second-level" ); jQuery( "li.menu-item-language.menu-item-language-current.menu-item" ).addClass( "first-level" ); }); </script> Afterwards follow the instructions from the Elegant Themes Article "How to Create a Mobile Collapsing Nested Menu with Divi’s Theme Builder" hidden link That works for us 🙂