Skip Navigation

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

Problem:
The client installed WPML and noticed that while the text in the header translates when switching languages, the layout breaks. Specifically, the menu alignment is incorrect on both desktop and mobile views. The client attempted to edit the Elementor Header templates for different languages but could only access the original Dutch header.
Solution:
We recommend the following steps to resolve the header layout issue:
1. Increase the WP Memory Limit to at least 128MB, as WPML requires more memory than the default 40MB provided by WordPress. Add the following lines to your wp-config.php file:

/* WP Memory Limit */<br />define('WP_MEMORY_LIMIT', '256M');

Place it before the line:

/* That's all, stop editing! Happy blogging. */

2. Navigate to WPML >> Translation Management, select 'Template' in the first dropdown, and click the 'Filter' button.
3. Choose the Header template and select the secondary languages to translate it.
4. Clear all types of site/server/CDN cache.
For more detailed instructions on translating Elementor templates, visit https://wpml.org/documentation/plugins-compatibility/elementor/#translating-elementor-templates.

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. Should you need further assistance, please open a new support ticket 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 Noman 1 month, 1 week ago.

Assisted by: Noman.

Author Posts
October 20, 2024 at 5:16 pm #16309133

rimmertL

Background of the issue:
I installed WPML and everything seems to work fine. Except the header. When I switch a language the text is translated, but the layout is broken. The menu alignment is wrong on desktop, and on mobile it's even worse. I tried the fix with editing the Elementor Header templates when selecting the different languages in the admin bar. But when loading the editor, it only displays the 'original' Dutch header, not the translated ones.

Symptoms:
The header layout breaks in other languages. The menu alignment is wrong on desktop, and on mobile it's even worse.

Questions:
Why does the Elementor header layout break when switching languages?
How can I edit the translated headers in Elementor?

October 21, 2024 at 6:04 am #16310155

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting WPML Support. I visited your site and I can see the header layout issue in desktop and mobile view as you can see in the attached screenshots.

To fix this issue, can you please try to follow the below steps and see if this resolves the issue:

1. The current WP Memory Limit on your site is 40MB. The WP memory limit needs to be increased, it's different from PHP memory. PHP memory is fine but WordPress uses 40MB as default in your site. The minimum requirements for WPML are 128MB: https://wpml.org/home/minimum-requirements/

Please add this line to your wp-config.php file to increase WP memory, wp-config.php file is located in the root of your WP install:

/* WP Memory Limit */
define('WP_MEMORY_LIMIT', '256M');

You can add it anywhere in your file. I recommend placing it right before the following line:

/* That's all, stop editing! Happy blogging. */

2. Go to the WPML >> Translation Management page.
3. Select the Template in a first dropdown as you can see in the attached screenshot.
4. Click the Filter button.
5. Choose the Header template.
6. Select the secondary languages.
7. Translate it.
8. Clear all sorts of site/server/CDN cache and see if this resolves the issue.

Here is a doc for more details:
https://wpml.org/documentation/plugins-compatibility/elementor/#translating-elementor-templates

Please let me know the results,
Thank you

Desktop - default.png
desktop - secondary.png
Mobile - default.png
mobile - secondary.png
Tranlsate Header template.png
October 21, 2024 at 7:30 am #16310443

rimmertL

Don't understand why the issue is fixed, but it is ;). So thanks a lot!!