Language Switcher with Shortcode not working on mobile

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

Problem:
The client was unable to click the language switcher button in the mobile header using Divi. The switcher was disappearing into the hamburger menu on mobile, and despite attempts to activate the button on desktop, add a second button, and deactivate CSS options in WP Rocket, the issue persisted.
Solution:
We found that the issue was due to the z-index settings. The row containing the language switcher had a z-index of 3, while the columns had a lower z-index, causing the language switcher to be unclickable because it was positioned behind the row. To fix this, we recommended:
1. Assign a higher z-index (greater than 3) to the column containing the language switcher from the Divi editor.
2. Apply the CSS from the screenshot provided to make the language switcher clickable.

If this solution does not apply to your situation, or if it seems outdated, we encourage you to check the related known issues, verify the version of the permanent fix, and confirm that you have installed the latest versions of themes and plugins. If the problem persists, please open a new support ticket with us.

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 3 replies, has 2 voices.

Last updated by Prosenjit Barman 1 year, 1 month ago.

Assisted by: Prosenjit Barman.

Author	Posts
April 16, 2024 at 9:20 am #15523742
fabioH-3	Hello, I am trying to: add custom language switcher to mobile header. Reason is the switcher disappears into the hamburger menu on mobile using divi. Link to a page where the issue can be seen: submitted URL/404, I made a custom header for this page only, so customers won't get confused. I expected that if you click the language button, the language changes. Instead, I got nothing, I can't click the button. I tried: - Activating the button on desktop too (its hidden there with the divi module option 'deactivate') -> on desktop it works, still not on mobile - Adding a second button (showing two in the header then) -> the second one works, while the first one still doesn't on mobile. -Deactivating css options in wprocket Looking forward to your suggestions!
April 16, 2024 at 10:58 am #15524376
Prosenjit Barman WPML Supporter since 03/2023 Languages: English (English ) Timezone: Asia/Dhaka (GMT+06:00)	Hello There, Thanks for contacting WPML Support. I understand the issue you're having. After reviewing your site, I noticed that the Menu language switcher is only implemented in the Header. I didn’t find any language switchers added using Shortcodes. However, the menu language switcher in the Header is functioning properly. Could you please add the language switcher to the mobile header using the shortcode? This will help me investigate the issue more effectively and offer more targeted assistance. Looking forward to your response and I'm always here to help. Best regards, Prosenjit
April 16, 2024 at 11:18 am #15524568
fabioH-3	Hello, Please investigate this URL on mobile: 35mmdealer.de/404. There it is added as a shortcode: [wpml_language_selector_widget] Kind regards
April 17, 2024 at 4:25 am #15528993
Prosenjit Barman WPML Supporter since 03/2023 Languages: English (English ) Timezone: Asia/Dhaka (GMT+06:00)	Hi There, Thank you for sharing the details. I investigated and discovered that the problem stems from the z-index settings. The row has a z-index of 3, whereas the columns have a lower z-index. As a result, the column, due to its lower z-index, is positioned behind the row, which has a higher z-index. This configuration causes elements within the column, like the language switcher, to become unclickable. To resolve the issue, you can assign a higher z-index (greater than 3) to the column that contains the language switcher from the Divi editor. Additionally, the CSS highlighted in this screenshot (hidden link) effectively made the language switcher clickable. I hope the information above will help to solve the issue. If there is anything else if you need help with, feel free to let me know. I will be happy to help. Best regards, Prosenjit
April 17, 2024 at 1:33 pm #15532538
fabioH-3	Thank you very much!