Issue seen on website after translation

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

Problem:
The client installed WPML on their development website. While the default language displays correctly, the translated version of the website appears broken, with issues in layout, untranslated navigation menus, and other text elements.
Solution:
First, we addressed the navigation menu issues in both the header and footer. We recommended translating the navigation menus following the detailed instructions provided here: https://wpml.org/documentation/getting-started-guide/translating-menus/.
For custom menu links and header buttons, we suggested manual translation methods as shown in this screen recording: https://go.screenpal.com/watch/cZj1bZV91yB.
Additionally, to fix styling issues, we inserted custom CSS code into WP > Appearance > Customize > Additional CSS:

ul#menu-header-menu-spanish {<br />    display: flex;<br />    justify-content: space-between;<br />    align-items: center;<br />    width: 100%;<br />}

If you're experiencing similar issues, we recommend trying these steps. However, if these solutions do not resolve your problem or seem outdated, please check related known issues at https://wpml.org/known-issues/, verify the version of the permanent fix, and confirm that you have installed the latest versions of themes and plugins. If issues persist, we highly recommend opening a new support ticket 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.

No supporters are available to work today on this forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Tagged: Custom Work

This topic contains 9 replies, has 2 voices.

Last updated by Kor 1 month, 2 weeks ago.

Assisted by: Kor.

Author	Posts
August 6, 2024 at 3:32 pm #16044670
todB	Background of the issue: I installed WPML on our development website. It shows correctly on the default language. Symptoms: When I check the translated website, it is all broken. You can compare both home pages: hidden link and hidden link. Questions: Why is the translated website broken? How can I fix the broken layout on the translated website?
August 6, 2024 at 4:05 pm #16044848
Kor Supporter Languages: English (English ) Timezone: Asia/Singapore (GMT+08:00)	Thanks for your patience. Here is the ticket. Please let me know how it goes.
August 6, 2024 at 4:17 pm #16044850
todB	Hi, looks far better. Now, issue is that there are many items that are not translated. For example, Top Navigation menus, button text etc. Footer menu items, some are not translated - for example - "TOP TRAINING COURSES" , "Training solutions" and all other headings, some sub topics like thise under "TOP TRAINING COURSES" in footer etc. some sections in the page like " Our Popular Products" , "The easy & quick way to build a Training Library" etc. does not seem to be translated, Internal pages like - hidden link are not translated
August 6, 2024 at 4:24 pm #16044852
Kor Supporter Languages: English (English ) Timezone: Asia/Singapore (GMT+08:00)	Thank you for your response. Please note that our support policy allows us to address only one issue per ticket. This approach helps our support team focus on resolving each issue effectively and allows other users to find solutions to their questions more quickly. Let's start by addressing the navigation menu issue in both the header and footer. I've reviewed it hidden link , and it appears that you'll need to translate the navigation menus. You can find detailed instructions https://wpml.org/documentation/getting-started-guide/translating-menus/ to guide you through this process. Once this issue is resolved, we can address any untranslated buttons and texts in a separate ticket.
August 6, 2024 at 5:21 pm #16044971
todB	I followed the instructions link given , We choose to select "Easy and Customizable" option. I synced and applied changes to menu. However, the menu design seems broken, like compressed . If you compare with default site and changed site. Still there are items that are not translated.
August 6, 2024 at 5:25 pm #16044986
Kor Supporter Languages: English (English ) Timezone: Asia/Singapore (GMT+08:00)	Thanks for your reply. Looks like you're referring to the custom menu links. You'll have to use the method shown here in this screen recording hidden link to translate it manually. I've also showed you how to translate the buttons on the header.
August 6, 2024 at 6:11 pm #16045091
todB	Thank you, that helped. However, the layout issue of menu is not resolved yet. As you see, the default page layout, menu have gaps between items. but in translated, it seems compressed .
August 7, 2024 at 1:39 pm #16048346
Kor Supporter Languages: English (English ) Timezone: Asia/Singapore (GMT+08:00)	Thanks for your reply. Looks like some missing stylings and I've fixed this for you by inserting the custom CSS code below into WP > Appearance > Customize > Additional CSS. ul#menu-header-menu-spanish { display: flex; justify-content: space-between; align-items: center; width: 100%; }
August 7, 2024 at 2:20 pm #16048589
todB	Thank you, that made look better. Now, the sub pages, has not yet translated - Example - hidden link hidden link How to have these pages translated too ? New threads created by Kor and linked to this one are listed below: https://wpml.org/forums/topic/sub-pages-not-translated-correctly/
August 7, 2024 at 2:23 pm #16048597
Kor Supporter Languages: English (English ) Timezone: Asia/Singapore (GMT+08:00)	Glad to know that helped. I've split the ticket here https://wpml.org/forums/topic/sub-pages-not-translated-correctly/ so that we could follow up on your new issue. As for this ticket, you can mark it as resolved.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.