Skip Navigation

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

Problem:
If you're experiencing issues with the flags not aligning horizontally when using the Twenty Twenty Four theme, you might need to apply custom CSS to adjust their alignment.
Solution:
We recommend adding the following CSS code to your site to align the flags properly:

.wpml-language-switcher-block ul.horizontal-list > li {
    display: flex;
    align-items: center;
}
 
.wpml-language-switcher-block .wpml-ls-flag {
    display: block;
    width: 18px;
    height: 12px;
    margin: 0;
    vertical-align: middle;
}
 
.wpml-language-switcher-block li[data-wpml="current-language-item"] .wpml-ls-flag {
    margin-top: 3px;
}

You can add this code via wp-admin → Appearance → Customize page → Additional CSS.
For more details on customizing the language switcher, check out these documentation links:

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. If you still need 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.

This topic contains 1 reply, has 2 voices.

Last updated by Mateus Getulio 2 months, 2 weeks ago.

Assisted by: Mateus Getulio.

Author Posts
September 16, 2024 at 11:51 am #16183377

stefanE-16

Background of the issue:
I noticed that the flags do not align when using the default theme Twenty Twenty Four. It looks like I will need to use CSS to adjust.

Symptoms:
Flags do not horizontally align when using Twenty Twenty Four - FSE theme. I expected to see that flags align horizontally to each other. Instead, I got not aligned flags.

Questions:
How can I align the flags horizontally when using the Twenty Twenty Four theme?
Is there a specific CSS code I should use to fix the alignment issue?

September 16, 2024 at 8:27 pm #16185542

Mateus Getulio
Supporter

Languages: English (English ) Portuguese (Brazil) (Português )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello there,

Can you please try to add the following code to your site to check if it gets the effect you wanted?

.wpml-language-switcher-block ul.horizontal-list > li {
    display: flex;
    align-items: center;
}

.wpml-language-switcher-block .wpml-ls-flag {
    display: block;
    width: 18px;
    height: 12px;
    margin: 0;
    vertical-align: middle;
}

.wpml-language-switcher-block li[data-wpml="current-language-item"] .wpml-ls-flag {
    margin-top: 3px;
}

You can add it to wp-admin → Appearance → Customize page → Additional CSS.

Please check more about language switcher customization:

https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-display-or-hide-the-language-switcher-on-specific-pages/

September 20, 2024 at 10:54 am #16202464

stefanE-16

Thank you the CSS worked nicely!

I noticed when doing an inspect element that there are some alignment issues with the flags. It would be helpful to get alignment in place so that I do not need to use this CSS in the future to align the flags.

Thank you!