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

Last updated by Carlos Rojas 1 year, 4 months ago.

Assisted by: Carlos Rojas.

Author Posts
July 21, 2023 at 8:44 am #14077117

dennisR-14

Hi,

I'm trying to get a brown background when wanting to switch from the current language to the alternative language (in this case from English to Spanish). At the moment, I get a background color also for English when hovering over Spanish, but I only want to see the background for Spanish when hovering over it.

I think I have the correct settings, but it doesn't seem to disappear. Please see this short video showing what I mean:
hidden link

I look forward to your reply.

Best regards,
Dennis

July 21, 2023 at 11:54 am #14079747

Carlos Rojas
Supporter

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

Timezone: Europe/Madrid (GMT+01:00)

Hello Dennis,
Thank you for contacting us

Please add the following CSS code to Appearance -> Customize -> Additional CSS:

.navbar .navbar-nav .menu-item.wpml-ls-item ul li a:hover {
    background: #893f04;
    color: #fff;
}

Could you confirm that the issue is solved?

Regards,
Carlos

July 21, 2023 at 12:30 pm #14080011

dennisR-14

Hi Carlos,

The issue has partly been resolved as it works when you hover over it, but I would also like to see the brown background when hovering over English and then seeing Spanish in a brown box already without hovering over it. Otherwise clients may not see Spanish as some of the pages have white and the lettering is also white.

Here's a video to show what I mean: hidden link

July 24, 2023 at 8:24 am #14086987

Carlos Rojas
Supporter

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

Timezone: Europe/Madrid (GMT+01:00)

Hi there,

In this case, you must change the CSS code to this one:

.navbar .navbar-nav .menu-item.wpml-ls-item, .navbar .navbar-nav .menu-item.wpml-ls-item ul li a:hover{
    background: #893f04;
    color: #fff;
    padding: 0 10px;
}

Please let me know if this is what you are looking for.

Regards!

July 24, 2023 at 9:46 am #14087831

dennisR-14

Hi Carlos,

Sorry, I've not been very clear.
Here's another website (Peaceful Island) where the current language does not have a background and the alternative language has a black background. This is what I want with the website Hostal Es Figueral, but then instead of black, I want it to be brown and NO background for the current language.

hidden link

Hope I explained it better now.

July 24, 2023 at 9:51 am #14087855

Carlos Rojas
Supporter

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

Timezone: Europe/Madrid (GMT+01:00)

Oh, I understood now 🙂

Here is the CSS code:

.navbar .navbar-nav .menu-item.wpml-ls-item ul li a{
    background: #893f04;
}

Could you tell me if it works as expected?

July 24, 2023 at 9:59 am #14087975

dennisR-14

Thank you Carlos. Worked like a charm!

July 24, 2023 at 10:11 am #14088149

Carlos Rojas
Supporter

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

Timezone: Europe/Madrid (GMT+01:00)

Great!

Please don't hesitate to contact us if you need our help in the future with WPML. We will be more than happy to help.

Have an excellent day!