Header Content Overlap

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

Problem:
The client is experiencing an issue where the header overlaps with the content on many translated pages, and the header does not inherit the style of the original page.

Solution:
We recommend checking the page builder or theme to identify the custom field that contains the page styling, which may include terms like "style", "css", "layout", or "styling". This custom field should be set to "copy" in WPML's settings to ensure the style is carried over to the translated pages.

To do this:
1. Go to WPML → Settings and locate the Custom Field Translation section.
2. Search for the terms "style", "css", "layout", or "styling" to find the relevant custom fields.
3. If no results appear, click on "Show system fields" to reveal hidden fields.
4. Once identified, set the custom field to "copy".
5. Make a minor edit to the original language page and save it.
6. Open the translated page and save it again to copy the CSS over.

For more information on translating custom fields, visit Translating Custom Fields documentation.

If this solution doesn't look relevant, 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: Exception

This topic contains 3 replies, has 2 voices.

Last updated by Waqas Bin Hasan 1 year, 11 months ago.

Assisted by: Waqas Bin Hasan.

Author	Posts
November 3, 2023 at 6:44 am #14722601
mustafaS-13	On many translated pages, the header overlaps with the content. And the header does not inherit the style of the original page e.g Original page: hidden link Translated page: hidden link
November 3, 2023 at 11:19 am #14725131
Waqas Bin Hasan WPML Supporter since 05/2014 Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	Hi, Thank you for contacting the support. This could be due to the way the page builder or the theme stores the styling for the content. Some store the styling in a custom field (the custom field usually contains the "style" or "css" or "layout" or "styling" wording) and that custom field might need to first be set to "copy" in order to have the styling being carried over to the translated page. After doing this, you should first make a small change to the default language, then save the page, then go to the translation of that page and re-save it - and the CSS should be copied over. See https://wpml.org/documentation/getting-started-guide/translating-custom-fields/ for details on translating custom fields. Please let me know if this help. Regards.
November 3, 2023 at 2:55 pm #14726679
mustafaS-13	I need help recognizing what exact custom field to set to 'copy' Thank you
November 6, 2023 at 6:05 am #14734665
Waqas Bin Hasan WPML Supporter since 05/2014 Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	You can set the custom field translation preferences by going to WPML → Settings and scrolling to the Custom Field Translation section. Then search for "style" or "css" or "layout" or "styling" words. It should then show you some of the fields containing these words. Based on the results you 'll need to assess what would be the more appropriate and follow along (as mentioned previously). If you don't see any results, please retry by clicking "Show system fields" under "Custom Field Translation" section title. This 'll reload the page and 'll enable the hidden fields. If none of these help, I 'll need to take a closer look at your site. Then please provide temporary access (WP-Admin and FTP), preferably to a test site where the problem has been replicated. Your next answer will be private, to share this information safely. Also provide detailed steps to reproduce the issue and links to pages in admin and on frontend. IMPORTANT: Please take a complete backup of the site to avoid data loss. I may need to activate/deactivate plugins also. See https://wpml.org/purchase/support-policy/privacy-and-security-when-providing-debug-information-for-support/ for details on privacy and security.