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 thread is resolved. Here is a description of the problem and solution.

Problem: I need to put the language switcher flags in one raw.

Solution: - Go to WPML > Languages > Language switcher options > Additional CSS (optional) - Add the CSS needed.

Relevant Documentation: https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/

This topic contains 5 replies, has 2 voices.

Last updated by Andrés 2 years, 6 months ago.

Assigned support staff: Andrés.

Author Posts
December 27, 2016 at 10:01 am #1168860

gregorK-3

Hi guys

I need to put language selector in upper menu to new row, positioned to center. It works very well at the end of the menu, but then is not aligned on mobile. In fact, mobile is the only issue as you can see on screenshot. We need flags in it's own row on mobile
Thank you

December 27, 2016 at 12:20 pm #1169011

Andrés
Supporter

Languages: English (English ) Spanish (Español ) French (Français )

Timezone: Europe/Paris (GMT+02:00)

Hello Gregor,

Welcome to WPML support forum.

Could you please go to WPML > Languages > Language switcher options > Additional CSS (optional) and add the following CSS:

@media only screen and (max-width: 760px) {
    .menu-item-language {
        display: block;
        width: 100%;
    }
}

Documentation:
https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/

Best regards,
Andrés

December 27, 2016 at 1:38 pm #1169086

gregorK-3

Thank you .. now it is in new row, but vertical sorted ... hidden link

December 27, 2016 at 1:51 pm #1169097

Andrés
Supporter

Languages: English (English ) Spanish (Español ) French (Français )

Timezone: Europe/Paris (GMT+02:00)

I'm not sure to understand. Previously you mentioned "We need flags in it's own row on mobile", isn't it what you are looking for?

If what you meant was to have only the flags in one row you may use the following CSS instead of the previous one. However, there is not enough space for it, but you can always increase the width of your widget area.

li#menu-item-987 {
    width: 100%;
}
December 27, 2016 at 2:05 pm #1169111

gregorK-3

brilliant .. thank you!

December 27, 2016 at 2:53 pm #1169143

Andrés
Supporter

Languages: English (English ) Spanish (Español ) French (Français )

Timezone: Europe/Paris (GMT+02:00)

Great!
Have a nice day,
Andrés