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 11 replies, has 2 voices.

Last updated by ermannoF 4 months, 4 weeks ago.

Assigned support staff: Bobby.

Author Posts
May 22, 2019 at 4:52 pm #3868189

ermannoF

Hi guys,

in the language switcher there is an empty space next to the flag and I can't get rid of it. I tried the code suggested in another post, but t didn't work. Can you help?

May 22, 2019 at 6:48 pm #3868775

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hi There,

if possible please provide me with access to the front end so i can review the language switcher to provide you with the correct CSS to target.

if you rather do this you can try the following

1. within Chrome browser right click the switcher and click on Inspect
2. with the inspect tool find the responsible CSS and tweak it until you get the desired results
3. Copy the above changed CSS and add it to your additional CSS section within your theme options usually

the reason a code provided in another post didnt work is most likely due to the CSS your theme is using.

NOTE : you dont have to provide me with full admin access just enough to be able to see the front end so i can better help you

May 22, 2019 at 10:27 pm #3869641

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

If possible please verify the above credentials as i am not able to login at the moment

May 23, 2019 at 5:57 pm #3878499

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Thank you for the access details !

you can target it using the following CSS

@media (min-width: 1024px)
.gm-main-menu-wrapper .gm-navbar-nav > .gm-dropdown:not(.mega-gm-dropdown) .gm-dropdown-menu {
    width: 150px;
}

Please note that we cannot provide custom work within the forum therefore please treat the above as a pointer to help you towards the solution. (you can adjust the size by changing 150px to larger or smaller)

May 23, 2019 at 6:07 pm #3878581

ermannoF

Hi, thanks for your message. I've tried the code you gave me, but it appears it has an error in the second line. Is that correct?

May 23, 2019 at 6:39 pm #3878803

ermannoF

I solved the dropdwon issue, but the space issue is still there.

May 23, 2019 at 8:06 pm #3879295

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Try the following CSS and let me know your results

.gm-main-menu-wrapper .gm-navbar-nav > .gm-dropdown:not(.mega-gm-dropdown) .gm-dropdown-menu {
    min-width: 150px;
    width: 150px;
}

NOTE : keep in mind that this will also affect the rest of the drop down menus therefore dont make it too small, i think 150px was OK

May 23, 2019 at 8:34 pm #3879351

ermannoF

Hi, unfortunately it doesn't work. What else could I try?

May 23, 2019 at 9:36 pm #3879529

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

It looks as expected now, with the width set at 150px

please let me know if you are still experiencing this issue

May 24, 2019 at 5:33 am #3881207

ermannoF

So is this pace normal?

May 24, 2019 at 5:28 pm #3886755

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

I can see that its changed again.

The dropdown looks normal as your theme has its own CSS that controls the way your language switcher is showing.

From WPML's side the switcher is working as expected , any customization that is in effect is handled through your theme's CSS.

if you are looking to make the space even less then you need to take the CSS i provided above and lower the number from 150px to 80px

the higher that number the more space, the less the number the less space. This is all based on your theme's and menu's CSS.

.gm-main-menu-wrapper .gm-navbar-nav > .gm-dropdown:not(.mega-gm-dropdown) .gm-dropdown-menu {
    min-width: 80px;
    width: 80px;
}
May 27, 2019 at 7:12 pm #3900475

ermannoF

I put the name of the language on the side.