Change breakpoint in headermenu of wpml flags switcher

This thread is resolved. Here is a description of the problem and solution.

Problem:
The Enfold theme language switcher was moving to the new line on mobile devices.

Solution:
I have followed the below steps in order to fix this issue:

1. Added WPML Language Switcher from WPML >> Languages > Menu Language Switcher.

2. Disabled the existing Enfold theme language switcher by following the below steps:
- Went to Enfold >> Theme Options page.
- Clicked on Header >> Extra elements tab.
- Set the Enfold WPML Language Flags option to Hide the default language flags by pressing the save button.

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.

Tagged: Not WPML issue

This topic contains 4 replies, has 2 voices.

Last updated by Noman 1 year, 3 months ago.

Assisted by: Noman.

Author	Posts
November 27, 2023 at 11:16 pm #14935185
henk-janG	I use Elfold with a child theme. I have included the flags language switcher in the headermenu. When I have a screen below 750 pixels, The language switcher moves one line below the header menu. I want the switcher to stick to the header menu and not have a breakpoint. The language switcher should just move together with the headermenu. Is there any css or other code that would make this possible?
November 28, 2023 at 9:33 am #14937037
Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	Hi, Thank you for contacting WPML Support. You should be able to override the CSS breakpoints by using the below CSS: @media(max-width:767px) { .responsive #header_meta .sub_menu>ul { width: auto !important; float:left !important; } } In the custom CSS section of your theme and it will look as in the attached screenshot. Please let me know if this resolves your issue or if you need further assistance with this issue. Thank you
November 28, 2023 at 9:29 pm #14944819
henk-janG	Hi Noman, Thank you for the answer. It did not resolve my issue. On a mobile screen, the flags still drop down below the words:"Veilig Reizen" When I look into the code, I see that the flags have their own html tag with their own class. . When I move the <LI> with all the flag codes inside the <UL> tag of the avia2-menu, the flags behave as they should. But I can only do this in the inspector of the browser and have no idear how to code this. Would be great if you can help me with that.
November 29, 2023 at 6:51 am #14946479
Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	To take a closer look at this issue, please provide temporary access (WP-Admin and FTP Login info) to your site (preferably staging site), so that I can look into your setup and debug the issue. Your next answer will be private, meaning only you and I can access it. === Please backup your database and website === ✙ I would additionally need your permission to deactivate and reactivate Plugins and the Theme and to change configurations on the site. This is also a reason the backup is essential. Thank you
November 29, 2023 at 4:12 pm #14953649
Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	Thanks for providing the login details. I have followed the below steps: 1. Added WPML Language Switcher from WPML >> Languages > Menu Language Switcher so that it adds the “li” list item in the existing “ul” tag. 2. Disabled the existing language switcher by following the below steps: - Went to Enfold >> Theme Options page. - Clicked on Header >> Extra elements tab. - Set the Enfold WPML Language Flags option to Hide the default language flags by pressing the save button. Now the switcher is with the header menu, as seen in the attached screenshot. Please check and confirm. Thank you
November 29, 2023 at 6:43 pm #14955293
henk-janG	Hi Noman, Thank you so much for this fix. I could not do it without you. Once again, thank you so much. Henk-Jan