Skip Navigation

Home › Support › English Support › [Resolved] Menu Language Switcher (Flags only) - Align Drop Down Flags Vertically

[Resolved] Menu Language Switcher (Flags only) - Align Drop Down Flags Vertically

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

Problem:
The client is trying to align other language flags directly below the active language flag on their website. The flags are misaligned to either the left or right depending on the screen size. Additionally, when switching to the Arabic language, the dropdown flag appears very small.

Solution:
First, we recommended adding custom CSS to align the Arabic flag directly under the English flag without any extra spacing. Here is the CSS code we provided:

.x-anchor-content {padding-left: 0px !important;} .x-anchor-text {margin-left: 0px !important;}

Next, we suggested performing a test on a staging/testing site by disabling all non-WPML plugins and switching to a default WordPress theme to isolate the issue. We also mentioned that the issue might be due to media queries used by the theme or plugins for styling adjustments on different screen sizes. We provided a link to learn more about media queries:

If the client finds working with custom CSS challenging, we recommended seeking the help of a front-end developer or a WPML contractor, which can be found here:

If this solution doesn't look relevant, please open a new support ticket at the 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.

Tagged: 

This topic contains 3 replies, has 2 voices.

Last updated by Mihai Apetrei 1 year, 7 months ago.

Assisted by: Mihai Apetrei.

Author Posts
October 29, 2023 at 6:46 pm #14687285

jun-kiatP

Tell us what you are trying to do?
Trying to align other language flags directly below the active language flag. Currently it is misaligned to either the left or right depending on screen size.

Is there any documentation that you are following?
Could not find, but found a potential old thread (https://wpml.org/forums/topic/language-switcher-flag-alignment/) probably dealing with the same issues as I have but unable to access it as it is more than 2 years old.

Is there a similar example that we can see?
Not sure.

What is the link to your site?
hidden link

Screenshot 2023-10-30 at 2.34.48 AM.png
October 29, 2023 at 8:42 pm #14687381

Mihai Apetrei
WPML Supporter since 03/2018

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hi there.

Before this ticket gets assigned to one of my colleagues, I will try to help.

Please add the following CSS in Appearance > Customizer > Custom CSS > and save:

.x-anchor-content {
    padding-left: 0px !important;
}

.x-anchor-text {
    margin-left: 0px !important;
}

This should align the Arabic flag right under the EN flag without any extra spacing to the left of the AR flag.

Kind regards,
Mihai Apetrei
October 30, 2023 at 2:08 am #14687643

jun-kiatP

Hi,

Tks for the reply.

The code provided works for the first 2 break points, but it misaligned again at tablet view. You can refer to the attached image.

I noticed another issue, once switch to Arabic language the drop down flag is super tiny. You can refer to the attached image.

Thank you.

Screenshot 2023-10-30 at 10.06.32 AM.png
Screenshot 2023-10-30 at 10.03.25 AM.png
Screenshot 2023-10-30 at 10.03.18 AM.png
Screenshot 2023-10-30 at 10.03.10 AM.png
October 30, 2023 at 2:05 pm #14692717

Mihai Apetrei
WPML Supporter since 03/2018

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hello there and welcome back! 😊

From what you've described, it seems like there might be some custom CSS causing the styling issues you're facing. But don't worry, I'm here to help guide you through the process!

To tackle this, I'd recommend performing a test on a staging/testing site. This way, you can isolate the issue by disabling all non-WPML plugins and switching to a default WordPress theme like TwentySeventeen. Doing this should give you a clear view of how things are supposed to look.

Now, when it comes to custom CSS, I understand that it might not always fall under our standard Support Policy, as it's considered custom work. But rest assured, we're more than happy to assist you in any way we can.

In your specific case, it looks like your theme or one of the active plugins might be using media queries (hidden link) for styling adjustments on different screen sizes. To address this, you'll need to work with media queries in your CSS to target and overwrite the conflicting code.

If you find working with custom CSS a bit challenging, don't worry, you're not alone! We suggest considering the help of a front-end developer or a WPML contractor (https://wpml.org/contractors) who specializes in these areas. They can lend their expertise to ensure your site looks just the way you want it.

I hope you find this information helpful, and please don't hesitate to reach out if you have any more questions or need further assistance. We're here to support you every step of the way!

Warm regards,
Mihai