Skip to content Skip to sidebar

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

Problem:
The client is trying to remove the padding-right on the language switcher in the top menu on the right but is unable to target the switcher properly or override the properties due to multiple !important tags.
Solution:
1. The issue might be related to the CSS from WordPress itself, specifically from the Gutenberg block styles. The padding might be set by the following CSS rule in the file

/wp-includes/css/dist/block-library/style.min.css?ver=6.9

:

.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
    padding-left: 0;
    padding-right: .85em;
}

To override this, add the following CSS rule in WPML > Languages > Language switcher options > Additional CSS:

.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
  padding-left: 0;
  padding-right: 0 !important;
}

2. If the issue persists, it might be due to the theme. We recommend testing with a different theme, such as the Twenty Twenty Five Theme, to see if the issue still occurs. You can use a WPML test site to experiment with different themes and settings.

3. Additionally, the padding issue might be influenced by CSS Flexbox properties set in the class

.wp-block-navigation__container

from the file

/wp-includes/blocks/navigation/style.css

, which uses

display: flex;

.

If these solutions do not resolve the issue or seem 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 the problem persists, 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.

This topic contains 8 replies, has 0 voices.

Last updated by Andreas W. 4 weeks, 1 day ago.

Assisted by: Andreas W..

Author Posts
February 27, 2026 at 9:47 pm #17861164

katarinaP

I am trying to remove padding-right on the language switcher - top menu on the right. I have tried everything I could think of - from adding css in my theme stylesheet to adding custom css to the switcher itself - nothing works. It is like I can't target the switcher properly or the properties are overwritten with many !important tags.

February 27, 2026 at 10:07 pm #17861200

Andreas W.
WPML Supporter since 12/2018

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

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

Hello,

Could you please provide me with the URL of the website, so that I can take a closer look?

Note that design issues are usually a topic for the theme support.

Best regards
Andreas

March 2, 2026 at 3:14 pm #17865392

katarinaP

Hi Andreas,
Sorry I missed to include the link! Here it is: hidden link
I might deploy this website within a day or so, so. you can also alternatively check: hidden link. Still no luck in removing the margin right, and to me it seems to come from the language switcher itself.
Thank you for your support!
Katarina

March 3, 2026 at 8:56 am #17867260

Andreas W.
WPML Supporter since 12/2018

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

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

This is not coming from WordPress:
/wp-includes/css/dist/block-library/style.min.css?ver=6.9

.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
    padding-left: 0;
    padding-right: .85em; 
}

You could try to overwrite this CSS rule with:

.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
  padding-left: 0; 
  padding-right: 0 !important; 
}

Try saving this rule at WPML > Languages > Language switcher options > Additional CSS.

March 3, 2026 at 1:24 pm #17868655

katarinaP

Hi Andreas,
Thank you for your reply! Unfortunately, this is not solving the issue. These classes also target the mobile menu, so removing the padding affects the mobile menu layout. I'm looking for a way to only target this language switcher element, because i don't know how else this could work. I appreciate your help.

March 3, 2026 at 2:49 pm #17869046

katarinaP

Hi Andreas, I changed the align orientation of other menu items to left, and that changed the mobile menu to left align. I implemented your code and it successfully removes the padding-right on the item. However, the language switcher still doesn't stand at the right edge of the menu content (you can see that other elements on the page (title underneath) that the full width but the switcher has an extra 50px that is added to all the block items. If I remove it using these classes it affects the whole site

March 3, 2026 at 7:54 pm #17870007

Andreas W.
WPML Supporter since 12/2018

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

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

This is related to the theme.

Here you can see a WPML test site using a WPML Language Switcher block inside the header, and this issue does not occur on the Twenty Twenty Five Theme.

One-Click-Login:
hidden link

Maybe you would like to install your theme here and try to recreate the issue? This way, I could try to find a solution for you.

Make sure to leave me a comment once the theme is installed on this sandbox.

March 6, 2026 at 10:48 am #17877509

katarinaP

Hi Andreas,
Thank you! As I mentioned I did manage to remove the padding with your code, but the (computed) margin-right remains on the .wp-block-navigation ul. When I check your sandbox site I see that you still have the same issue there too. Aligning the items to the right doesn't fix it in my case, and I tried to do the same in sandbox now but I don't see that my save actually affects the website. I'm including the screenshot of that edit too, because it seems to work there but I can't verify.

Screenshot 2026-03-06 at 11.46.02.png
Screenshot 2026-03-06 at 11.41.19.png
Screenshot 2026-03-06 at 11.41.04.png
March 6, 2026 at 5:43 pm #17878300

Andreas W.
WPML Supporter since 12/2018

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

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

This padding is not coming from WPML, it is coming from Gutenberg:

File: /wp-includes/blocks/navigation/style.css

Class: .wp-block-navigation__container

This class uses CSS Flexbox and this is what is setting this margin dynamically.

Rule: display: flex;