Skip to content Skip to sidebar

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

Problem:
You are experiencing extra padding on the right of the 'Donate' button in the Divi main menu when the WPML language selector is active. This issue does not occur when the language selector is not active.
Solution:
The issue arises because your current CSS targets only the last menu item. When the language switcher is not present, the button is the last item, so the padding is removed. However, when the switcher is added, the button becomes the second-last item, and the padding remains. To resolve this, target the button directly with the following CSS:

#top-menu>li.cta-button {<br />    padding-right: 0 !important;<br />}

This adjustment will remove the extra space even when the language switcher is active, ensuring your button looks consistent across all pages.

If this solution does not resolve your issue, or if it seems outdated or irrelevant to your case, 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. Should you need further assistance, please do not hesitate to open a new support ticket at 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 1 reply, has 0 voices.

Last updated by Niels 2 months ago.

Assisted by: Noman.

Author Posts
May 19, 2025 at 2:37 pm #17048983

Niels

Background of the issue:
I have a button in the Divi main menu on my site hidden link. With CSS, I styled the button, but there is a conflict with the WPML language selector. I use the following CSS: .cta-button { border: 1px; border-radius: 50px; background: #1b2cc1; transition: all .3s 0s; } .cta-button a { padding: 15px !important; color: #ffffff !important; } .cta-button:hover { transform: scale(1.05); transition: all .2s 0s; } .et-fixed-header #top-menu .cta-button a { color: #fff !important; }

Symptoms:
There is extra padding on the right of the 'Donate' button in the Divi main menu when the WPML language selector is active. This padding is not visible when the selector is not active, as seen on hidden link.

Questions:
How to get exactly the same button style when the WPML-selector is active?

May 19, 2025 at 5:22 pm #17049862

Noman
WPML Supporter since 06/2016

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting WPML Support. The issue happens because your current CSS targets the last menu item only. When the language switcher is not present, the button is the last item, so the padding is removed. But when the switcher is added, the button becomes the second-last item, and the padding stays. Currently below CSS is being used:

#top-menu>li:last-child {
    padding-right: 0;
}

To fix it, target the button directly like this:

#top-menu>li.cta-button {
    padding-right: 0 !important;
}

This will remove the extra space even when the language switcher is active, and your button will look the same on all pages.

Please let me know if this resolves the issue or if you need further assistance with this issue.
Thank you

After CSS.jpg
Before CSS.jpg
May 20, 2025 at 10:22 am #17052065

Niels

Hi Noman,

Thanks a lot for your explanation en code! I fixed it, also with a little bit of extra CSS for margin on the right of the button.

Cheers,
Niels