Background of the issue:
I have been experiencing an issue with WPML where the translated version of my site is not rendering certain CSS code correctly. The problem seems to be related to WPML as it only affects the translated version. The code is located in Divi > theme builder > global header, and the menu effects CSS is located in Divi > theme settings > custom CSS.
Symptoms:
On the translated version of my site, multiple CSS parts are not working. For example, the underline effect on hover and submenu items on mobile are not displaying correctly. Instead of being under a + icon, all items show up.
Questions:
How can I fix the CSS rendering issue on the translated version of my site?
To be able to investigate the problem, we need to replicate the issue on a clean installation.
I created a clean installation of WordPress, WPML, and all necessary WPML add-ons and Divi.
You can access the WordPress dashboard using the link below: hidden link
Kindly follow the steps below:
- Don't restore your site there.
- Try to replicate the issue with minimal steps.
- Then let me know the steps to see the problem and reproduce it.
I have installed the header now with some code added at Divi > theme settings > custom CSS. That's the code for the underline effect that only works in the main language not when translated. That is the same on the new install. But for some reason the mobile menu works on both languages on the new install with + icons for submenus but not on my website. Any idea why? I have tried disabling all plugins except WPML but it still did not work.
The underline effect does work for the language switcher but not for the other menu items on both sites.
The CSS is applied in both languages, but the CSS styles implemented for the English version of your website do not apply to the Swedish version primarily due to differences in HTML structure and missing class names in the Swedish menu markup.
Identified Issues:
Missing Wrapper Classes: The Swedish menu lacks the
dd-me-002
and
dd-dme-7b
classes on its parent elements. These classes are essential for the CSS selectors to target the menu items correctly.
Absent
<span>
Tags: In the English menu, each
<a>
tag wraps its text within a
<span>
tag, which is crucial for the underline hover effect. The Swedish menu items are missing these
<span>
tags.
Suggestions:
Synchronize Menu Structures: Ensure that both English and Swedish menus have identical HTML structures, including all necessary wrapper classes and
<span>
tags within
<a>
elements.
Utilize WPML's Menu Synchronization: WPML offers a feature to synchronize menus across different languages. Navigate to WPML > WP Menus Sync and follow the prompts to align your menus. For detailed guidance, refer to WPML's documentation on Translating Menus.
Inspect and Modify Menu Templates: If you're using a theme builder like Divi, ensure that the header templates are correctly translated and include all necessary classes and HTML structures. You can manage and translate these templates via WPML > Translation Management.
Verify Language Switcher Configuration: Check that the language switcher is correctly configured and styled for all languages. WPML allows customization of the language switcher through WPML > Languages > Menu Language Switcher. For more information, see WPML's guide on Language Switcher Options.
I managed to fix the HTML <span> tags by creating a custom translated menu for english, thanks! But I still can't find the reason why the mobile menu code doesn't work since it worked in the sandbox. I downloaded the layouts from the site so the configuration is the same. Is there some bug or something you can see causing it?
New threads created by Otto and linked to this one are listed below:
We use cookies to optimize our website and services. Your consent allows us to process data such as browsing behavior. Not consenting may affect some features.
Functional
Always active
Required for our website to operate and communicate correctly.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
We use these to analyze the statistics of our site. Collected information is completely anonymous.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
These cookies track your browsing to provide ads relevant to you.
