Skip Navigation

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

Last updated by Mohamed Sayed 1 year, 9 months ago.

Assisted by: Mohamed Sayed.

Author Posts
August 30, 2023 at 12:07 pm #14313013

Aleksei Hecht

I am trying very hard to figure out a way to configure the background color when hovering in the dropdown menu for WPML language selector inserted in widget in the header section.

Even I´m not really an expert, some times I solve similar design issues by adding a bit of custom CSS but this time I haven't been able to figure it out. the background of some pages is white. The language font is also white against an orange background. Hovering makes the font completely disappear against the background.

While browsing for a solution I came across an article with a workaround involving changing some code. I don't want to try this because I am afraid to break things since this workaround is for a different version of WPML or also that these changes might get overwritten by an update. I guess this might be related to the issue.
https://wpml.org/errata/language-switchers-hover-colors-option-not-working-as-expected-in-widgets/

It's easier to notice on desktop. here is a link to a page where you can see it by yourselves: hidden link

August 30, 2023 at 3:47 pm #14314961

Mohamed Sayed

Hi Aleksei,
Thanks for contacting WPML support.

Could you please try the following CSS and let me know if that helps?

li .wp-block-navigation-item .hasHoverBackgroundColor:hover {
    background-color: #000000 !important;
}

I tested this in my browser and it looks working as you see in the attached screenshot.

Kind regards,
Mohamed

Screenshot_135.png
August 30, 2023 at 5:35 pm #14315489

Aleksei Hecht

I tried your code both in the custom css field in the theme customization and also in WPML settings for language switcher and is not working in either.

capture.png
August 30, 2023 at 11:55 pm #14316463

Mohamed Sayed

Hi,

I would need to request temporary access (WP-Admin) so I can investigate this issue further.
– preferably to a test site where the problem has been replicated if possible –

Your next answer will be private, which means only you and I have access to it.

❌ Please backup your database and website before providing us with access details ❌

If you don't see the form below, please don't add your credentials as they will be publicly exposed:
hidden link

Privacy and Security when Providing Debug Information for Support:
https://wpml.org/purchase/support-policy/privacy-and-security-when-providing-debug-information-for-support/

August 31, 2023 at 11:21 am #14319865

Mohamed Sayed

Hi,

The code didn't work due to an additional space I added in my previous reply, sorry about that.

I fixed it and it works now, please check it here: hidden link

The following code is the correct one:

li.wp-block-navigation-item .hasHoverBackgroundColor:hover {
    background-color: #000000 !important;
}

Kind regards.

August 31, 2023 at 12:11 pm #14320511

Aleksei Hecht

thank you!