Skip to content Skip to sidebar

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

Problem:
You are working on a DIVI-based site with WPML in two languages (EN and FR). The global header is set through the DIVI theme builder, and the language flags are set through the widget '[wpml_language_selector_widget]'. On the mobile version of the site, the language flags are not clickable, although they work fine on the PC version.
Solution:
The issue is due to the z-index settings in your DIVI theme. The main row has a z-index of 3, while the columns have a lower z-index, causing the column with the language switcher to be positioned behind the row. To make the language flags clickable on mobile, assign a higher z-index (greater than 3) to the column that contains the language switcher from the Divi editor. Adjusting the CSS as highlighted can also make the language switcher clickable.

If this solution does not resolve your issue, or if it seems outdated or irrelevant to your case, we recommend opening a new support ticket. We also highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. For further assistance, please visit our support forum at WPML support forum.

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: 

This topic contains 1 reply, has 2 voices.

Last updated by Prosenjit Barman 1 year, 4 months ago.

Assisted by: Prosenjit Barman.

Author Posts
August 12, 2024 at 3:02 am #16060274

David hauptschein

Background of the issue:
I am working on a DIVI-based site in two languages (EN and FR) using WPML. The global header is set through the DIVI theme builder, and the language flags are set through the widget '[wpml_language_selector_widget]'. Here is a screen recording showing how the flags widget shortcode is set through the global header with DIVI THEME BUILDER: hidden link

Symptoms:
On the mobile version of the site, the language flags are not clickable, whereas they work fine on the PC version.

Questions:
What should I do to make the language flags clickable and functional on the mobile version of the site?

August 12, 2024 at 6:46 am #16060625

Prosenjit Barman
WPML Supporter since 03/2023

Languages: English (English )

Timezone: Asia/Dhaka (GMT+06:00)

Hi There,
Thanks for contacting WPML Support.

Before this thread is assigned to my colleague, I'd like to offer some initial guidance and potential solutions.

I investigated and discovered that the problem stems from the z-index settings. The main 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 the attached screenshot has 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 us know. We will be happy to help.

Best regards,
Prosenjit

Screenshot 2024-08-12 124529.png