Home›Support›English Support›[Resolved] WPML Compatibility Issue: Mega Menu Submenu Icons Disappearing or Appearing Blurry
[Resolved] WPML Compatibility Issue: Mega Menu Submenu Icons Disappearing or Appearing Blurry
This thread is resolved. Here is a description of the problem and solution.
Problem: You are using the WPML plugin with Max Mega Menu on your multilingual WordPress site and experiencing issues where submenu icons disappear or appear blurry in translated menus. You are wondering if the 'Synchronize menus between languages' option could resolve this. Solution: Unfortunately, Max Mega Menu is not fully compatible with WPML. To handle translated menus, you need to create them from scratch for each language as outlined in Max Mega Menu's documentation, which you can find here: https://www.megamenu.com/documentation/wpml-setup/. We recommend setting up a testing environment to replicate your menu setup and confirm the behavior. Here's a link to a testing site where you can do this: https://unique-accordion.sandbox.otgs.work/?auto=QDikoduZmXkvDEZLG2B25k9JxeUUrgvs.
If this solution does not apply to your case, or if it seems outdated, we 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. If issues persist, please open a new support ticket at WPML support forum for further assistance.
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.
Background of the issue:
We are using the WPML plugin alongside Max Mega Menu on our multilingual WordPress site, hidden link. We have assigned custom icons to the submenu items within our mega menu. The translated menu text displays correctly across different languages.
Symptoms:
Some icons disappear entirely when viewing the translated versions of the menu. In cases where icons do appear, they often render as blurry or pixelated. The issue seems to occur only when WPML is involved in generating the translated menus.
Questions:
Could you please advise on how to resolve the issue with submenu icons disappearing or appearing blurry in translated menus?
Are there any known compatibility considerations between WPML and icon rendering in Max Mega Menu?
I can see option to "Synchronize menus between languages" if I press this will it help?
The required fields can be found below the comments section. The information you enter is private, i.e. only you and I can see it and have access to it.
I may need to replicate your website locally. To do this, I need to temporarily install a plugin called "Duplicator" or "All in One WP Migration" on your website. This will allow me to create a copy of your website and content. Once the issue is resolved, I will delete the local website. Let me know if this works for you.
IMPORTANT
Please make a backup copy of the site files and database before giving us access.
- If you do not see the wp-admin/FTP fields, this means your post and site login details are being made PUBLIC. DO NOT post your website details if you do not see the required wp-admin/FTP fields. If you do not, ask me to enable the private box. The private box looks like this:
Based on our chat I thought you had created your menus manually, by clicking on the "+" sign for the secondary languages in Appearance > Menus, that's why I didn't recommend synchronizing them. After checking your website, it seems they were actually synched.
Make sure to have a full website backup and sync your menus in WPML > WPML Menus Sync. Make sure that all pages inserted in the original menu are translated, and that all the custom links inserted are transalted in WPML > String Translation. You can find more details here: https://wpml.org/documentation/getting-started-guide/translating-menus/
I’ve identified the issue: the grid layout is not being generated automatically for different languages. For example, I had to create the Chinese version manually. Additionally, the icons are not being added across the localized versions either.
Given the number of languages involved, handling this manually is not a scalable solution. Could you please advise on an efficient approach to ensure that both the layout and icons are consistently applied across all language versions?
I've been trying since yesterday to create a copy of your website, but I can't make it work. Can you please create a staging version of it and send me the link? If the staging version has the same user you shared before, there's no need to create a new one.
About the issue itself, I've noted that grid layout is actually created normally, but the image is not. The images are inserted using a CSS pseudo-class, and that is mostly missing for the translations. I'll wait for the staging version, so I can check for conflicts and test solutions. Thanks in advance for the cooperation.
I’m currently working on creating a staging version for you. However, the sub-menu layout is not consistent across all languages. For the Chinese version, I had manually set a grid layout for the sub-menu, but after synchronization, the layout was not transferred at all. Instead, the menu items are now displaying as simple flyout menus.
Here is the staging URL. Sorry for the delay.
The credentials are the same.
FTP is different; let me know if you need that.
Also, when I clicked synchronise, it did not synchronise the layout of the sub menu; now they only appear as flyout menus instead of a grid layout like the original English language design.
So we have 2 issues.
Getting the sub-menu layout and icons when the language is changed.
The Max Mega Menu plugin is not compatible with WPML. After doing some testing and some internal research, I found that the only way to properly use the Mega Menus in secondary languages, is to create them from scratch, as explained in Max Mega Menu's documentation:
hidden link
To confirm that the WP Menus Sync does not work with Max Mega Menu, and to be able to find a solution (or at least a workaround), I need you to recreate the issue on a testing environment. It's only necessary to create a few translated pages and to create a menu using a similar layout to the one you have on your website. The idea here is to test it in isolation, so only minimum effort is used 🙂 Two languages, and one Max Mega Menu suffices. You can access the testing website here:
hidden link
WPML is setup with EN as default and DE as secondary. Please install the Max Mega Menu plugin, create a menu using the grid layout, with an icon, and sync it using WPML > WP Menus Sync. Once we verify that the behavior is the same, I can escalate that to our devs 🙂 Let me know how it goes. I understand this takes some effort, so I appreciate your cooperation on this matter.
Installed the mega menu plugin.
Created pages and there translation in German.
Created a menu.
Synchronized it.
Seeing same flyout menu in German language.
Thank you so much for following the steps and sharing the results. I'm getting a second opinion with our compatibility team and will get back to you as soon as I have feedback. That usually takes a few days.
