Skip Navigation

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

Problem:
If you're experiencing a large gap in the language frame when selecting the second language on your site, it might be due to custom code added through your theme, a plugin, or the backend.
Solution:
We recommend checking the width setting for the submenu in your site's CSS. You can resolve this issue by setting the width to 'auto' instead of a fixed pixel value. Here's how you can do it:
1. Navigate to your site's backend.
2. Go to Appearance > Themes > Customizer > Custom CSS area.
3. Add the following CSS code and save:

.wdt-header-menu ul li ul.children, .wdt-header-menu ul li ul.sub-menu {<br />    width: auto !important;<br />}

This adjustment should help eliminate the unwanted gap when switching languages.

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 issues persist, please open a new support ticket.

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 1 reply, has 2 voices.

Last updated by Mihai Apetrei 9 months, 3 weeks ago.

Assisted by: Mihai Apetrei.

Author Posts
August 27, 2024 at 11:40 am #16109262

dimitriosK-2

Background of the issue:
I am trying to use the language switcher on my site hidden link. When I select the second language, a huge gap appears.

Symptoms:
Large gap at the second language frame when selecting the second language.

Questions:
How can I reduce the gap that appears when selecting the second language?

August 27, 2024 at 12:02 pm #16109557

Mihai Apetrei
WPML Supporter since 03/2018

Languages: English (English )

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

Hi there.

This issue happens due to some custom code that is being added to either your theme, or through a different plugin or from the backend of the site.

You will see in the screenshots that there's 260px width set for the submenu.

We need to turn that into "auto" instead of a fixed pixel value.

Please go to your site's backend > Appearance > Themes > Customizer > Custom CSS area > add the following CSS code and save:

.wdt-header-menu ul li ul.children, .wdt-header-menu ul li ul.sub-menu {
    width: auto !important;
}

That should take care of that horizontal spacing as you see in the other screenshot I attached.

I hope that you will find this information helpful.

Mihai Apetrei

Screenshot 2024-08-27 at 14.59.47.png
Screenshot 2024-08-27 at 15.00.03.png