Skip Navigation

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

Problem:
You are trying to center the text of the language switcher in a widget, but it appears left-aligned due to the theme's CSS overriding your changes.
Solution:
To center the language switcher text, you need to apply specific CSS rules that can handle the theme's existing CSS. Here is the correct CSS to use:

ul .wpml-ls-menu-item a {
    display: flex;
    align-items: center;
    justify-content: center;
}

If this solution does not work because it might be outdated or not applicable to your case, we recommend opening a new support ticket. Also, 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 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 5 replies, has 2 voices.

Last updated by roxanneS 2 years, 2 months ago.

Assisted by: Andreas W..

Author Posts
March 16, 2023 at 9:27 pm #13264421

roxanneS

I am trying to: Have the language switcher text align center. The switcher is used in a widget.

Link to a page where the issue can be seen: hidden link

I expected to see: The language name centered horizontally in the column

Instead, I got:The language is left-aligned.

Gourmet-Royal-Screenshot.jpg
March 16, 2023 at 9:57 pm #13264511

Andreas W.
WPML Supporter since 12/2018

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Hello,

Take note that this is a theme issue.

Please try this CSS solution in the Customizer > Additional CSS or the theme's style.css file:

.wpml-ls-item > a[title] {
  text-align: center!important;
}

Best regards
Andreas

March 17, 2023 at 1:57 pm #13270107

roxanneS

Unfortunately, that solution does not work.

March 17, 2023 at 3:54 pm #13271075

Andreas W.
WPML Supporter since 12/2018

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Hello,

As mentioned, this is actually a topic for the theme support, as it is the theme's style that handles the language switcher but can offer to have a closer look at this and try to adjust this for you.

I would like to request temporary access (wp-admin and FTP) to your site to take a better look at the issue.

You will find the needed fields for this below the comment area when you log in to leave your next reply. The information you will enter is private which means only you and I can see and have access to it.

IMPORTANT

Please make a backup of site files and database before providing us access.
If you do not see the wp-admin/FTP fields this means your post & 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. The private box looks like this:
hidden link

The steps are also shown in this video: hidden link

Best regards
Andreas

March 17, 2023 at 5:03 pm #13271543

Andreas W.
WPML Supporter since 12/2018

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Hello,

Those issues are always these issues, as the menu is designed by CSS coming from the theme.

My CSS suggestion was incorrect, the element looks like that:

<span class="wpml-ls-native" lang="fr">Français</span>

The problem is, when I try to apply CSS to this element, then it does not always take effect, as the theme CSS is overwriting my changes.

The reason for a different layout is that the other menu items use a different markup in the theme:

hidden link">Contact Us

The correct CSS in this case is:

ul .wpml-ls-menu-item a {
    display: flex;
    align-items: center;
    justify-content: center;
}

Take note, that usually, theme support always helps with such problems.

Best regards
Andreas