[Resolved] Translation buttons misaligned in top bar of website
This thread is resolved. Here is a description of the problem and solution.
Problem: The client was experiencing issues with the alignment of the translation switching buttons in the global top bar of their website. The buttons were misaligned, with the English option being too far to the right and too high, past the divider. Solution: We identified that the issue was related to the theme's handling of these elements. After testing, we applied custom CSS to correct the alignment:
This CSS effectively hid the divider and adjusted the padding for the current language menu item, aligning the buttons properly.
If this solution does not resolve your issue, or if it seems outdated or irrelevant to your case, we recommend opening a new support ticket. Additionally, 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. For further assistance, please visit our support forum at https://wpml.org/forums/forum/english-support/.
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:
I am trying to fix the translation switching buttons in the global top bar of my website. Link to a page where the issue can be seen: hidden link
Symptoms:
The buttons are misaligned — the English option is too far to the right and too high, past the divider.
Questions:
How can I align the translation switching buttons properly in the top bar?
What could be causing the misalignment of the translation buttons?
It seems that there's some extra CSS interfering with the WPML language switcher's normal styling and it might require custom coding to get things showing up in a better spaced manner. Custom work falls outside the purpose of our Support Policy and you might need to hire a front-end developer or a WPML contractor (https://wpml.org/contractors/) if that will be the case but I'm happy to first take a closer look in the backend to see if there's anything I can do for you. 🙂
I would like to request temporary access (wp-admin and FTP) to your site so I can better examine the issue. The needed fields are below the comment area. When you log in to leave your next reply, the information you enter is private, meaning only you and I can see and access it.
Our Debugging Procedures
I will check various settings in the backend to see if the issue can be resolved. Although I won't be making changes that affect the live site, it is still good practice to back up the site before providing us access. In the event that we do need to debug the site further, I will duplicate it and work in a separate, local development environment to avoid affecting the live site.
- Please back up the site files and database before providing us access.
If you do not see the wp-admin/FTP fields, your post and website login details will be made PUBLIC. DO NOT post your website details unless you see the required wp-admin/FTP fields. If you do not, please ask me to enable the private box.
I can confirm that I was able to log in successfully.
Also, sorry for the delayed response - there's been a pretty full queue in the past few days + a weekend that got more tickets adding up.
Can you please let me know from where was this language switcher added? I can see that you have the custom language switcher enabled so I guess probably you added a shortcode somewhere on the site but I can't find it.
Please let me know how did you add that language switcher in that position.
Thank you very much for clearing things out for me.
This theme (Movedo) is very strange in how they do this and also I was not able to find any existing ticket on our support forum with a customer that mentioned this theme before.
