Skip Navigation

Home › Support › English Support › [Resolved] Split: Problem with menu styling in secondary language.

[Resolved] Split: Problem with menu styling in secondary language.

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

Problem:
Problem with menu styling in secondary language.

Solution:
Usually themes have options which need to be translated and can be found and set to translate (or copy) in WPML's custom fields settings (i.e. related to css, layout and etc).

However, sometime it may be required to fix a few in your own custom CSS by targeting language based selectors for secondary language(s), like below:

:lang(en) .my_menu_class:hover {
    background-color: transparent;
}

Where "en" in :lang(en) is the language code and should be adjusted accordingly.

Relevant Documentation:

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 is split from https://wpml.org/forums/forum/english-support/

Tagged: 

This topic contains 8 replies, has 2 voices.

Last updated by Waqas Bin Hasan 1 year, 10 months ago.

Assisted by: Waqas Bin Hasan.

Author Posts
July 14, 2023 at 6:15 am #14037335

nina-juulG

There is also an issue with the menu in english it has not replicated the layout from the danish menu. its placing a white banner behind each menu itemes but needs to look like the danish site. see screen shots with the correct danish menu layout and the wrong EN layout.

I expected to see: hidden link but in english
July 14, 2023 at 8:33 am #14038387

Waqas Bin Hasan
WPML Supporter since 05/2014

Languages: English (English )

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

Hi,

Thank you for contacting the support.

You can use the following CSS in your theme's CSS or in Appearance -> Customize -> Additional CSS:

:lang(en) .awb-menu__sub-li:hover {
    background-color: transparent !important;
}

Regards.
July 14, 2023 at 9:38 am #14038999

nina-juulG

Hi,

Sorry this didnt work?

Thanks
July 14, 2023 at 9:48 am #14039007

Waqas Bin Hasan
WPML Supporter since 05/2014

Languages: English (English )

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

Can you try the following?

:lang(en-US) .awb-menu__sub-li:hover {
    background-color: transparent !important;
}
July 14, 2023 at 11:05 am #14039371

nina-juulG

the first code worked when i out into wordpress customize area instead of the themes. Thank you.
July 14, 2023 at 4:41 pm #14040949

nina-juulG

I spoke too soon. it looks fine on the home page but not on the inner pages?
July 17, 2023 at 6:07 am #14045883

Waqas Bin Hasan
WPML Supporter since 05/2014

Languages: English (English )

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

For the inner pages, you may need to adjust the CSS accordingly. Perhaps you may need to adjust around the language code like mentioned in my second message (i.e. en-US).
July 19, 2023 at 9:28 am #14064057

nina-juulG

Hi,

I think the issue is when the page is active the menu is showing white. That why on the homepage its fine as HOME is not in the menu. I have tried playing with the CSS but nothing seems to work.

Thanks
July 19, 2023 at 12:32 pm #14066065

Waqas Bin Hasan
WPML Supporter since 05/2014

Languages: English (English )

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

Yes because there's a class "current-menu-item" is applied to the selected page. So you need to cover this also:

:lang(en) .awb-menu__sub-li.current-menu-item {
    background-color: transparent !important;
}
July 19, 2023 at 3:52 pm #14067609

nina-juulG

This worked. hopefully thats it. Thanks.