When main language is selected then secondary flag is misaligned horizontally

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

Problem:
The client is experiencing an issue where the language switcher flags are misaligned horizontally on their website when the main language is selected. This misalignment occurs after adding the Language Switcher to the Site Editor navigation.
Solution:
We recommend applying the following CSS to address the flag alignment issue:

.wp-block-navigation .wpml-language-switcher-navigation-block ul.horizontal-list li {<br />    display: contents;<br />}

If this solution does not resolve the issue or seems irrelevant due to updates or different configurations, 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. Additionally, if the problem persists, 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.

Tagged: Custom Work

This topic contains 1 reply, has 2 voices.

Last updated by Andreas W. 2 months ago.

Assisted by: Andreas W..

Author	Posts
September 26, 2024 at 9:17 pm #16227557
stefanE-16	Background of the issue: I am trying to align the language switcher flags correctly on my site hidden link. This issue was previously resolved in this thread: https://wpml.org/forums/topic/flags-do-not-horizontally-align-when-using-twenty-twenty-four-fse-theme/. The problem reappeared after adding the Language Switcher to the Site Editor navigation. I have tried various CSS solutions based on the last issue and documentation but still cannot get it to work correctly. Symptoms: When the main language is selected, the secondary flag is misaligned horizontally. The alignment changes when I click the secondary language flag. Try it out here: hidden link Questions: Why are the language switcher flags misaligned horizontally when the main language is selected? Could adding the Language Switcher to the Site Editor navigation cause this issue? What CSS solutions can I try to fix the flag alignment issue?
September 27, 2024 at 6:31 am #16228168
Andreas W. Supporter Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Hi, Could you please give this a try: .wp-block-navigation .wpml-language-switcher-navigation-block ul.horizontal-list li { display: contents; } I hope this helps, if not let me know. Best regards Andreas
September 27, 2024 at 10:27 pm #16231347
stefanE-16	Great! That worked nicely. Thank you. Hopefully this will be added into WPML so that I do not need to use the code snippet.