Skip Navigation

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

Problem:
The client is unable to see the language switcher in the top navigation menu on their website. It appears that the language switcher is present as a list-item in the HTML but is not visible on the desktop version, although it is visible on mobile.
Solution:
If you're experiencing this issue, we recommend checking the following:
1. The visibility issue might be due to the 'desktop-link-hide' class that is applied to the language switcher. This class is not added by WPML but might be coming from the Porto theme. You should check your theme's header settings where the language switcher was added to see if there's an option controlling its visibility on desktop.
2. If you cannot find such a setting, consider adding the following CSS to your theme's custom CSS section to override the visibility settings:

.menu-item.wpml-ls-item a.desktop-link-hide {<br />    display: block !important;<br />}

This CSS will make the language switcher visible on desktop by overriding any theme-specific settings that might be hiding it.

If the solution provided here becomes irrelevant due to updates or does not apply 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. If issues persist, 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.

Tagged: 

This topic contains 1 reply, has 2 voices.

Last updated by Noman 1 month ago.

Assisted by: Noman.

Author Posts
November 4, 2024 at 10:16 am #16359933

samD-19

Background of the issue:
I am trying to show my language switcher in my top navigation menu, but it isn't visible in the frontend. You can inspect the menu with the inspection tool to see that the language switcher is a list-item, although the flag and language names aren't visible. Link to a page where the issue can be seen: hidden link

Symptoms:
A menu without a language switcher is visible instead of the expected language switcher in the menu.

Questions:
Why is the language switcher not visible in the top navigation menu and how can this be fixed?

November 4, 2024 at 11:37 am #16360550

Noman
Supporter

Languages: English (English )

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

Hi,

Thank you for contacting WPML Support. After examining the source code of that section, I found that the language switcher is currently hidden on desktop but visible on mobile.

To resolve this, please try one of the following:

1. WPML doesn’t add the desktop-link-hide class, it seems it’s coming from Porto theme. You might want to check your header settings where the language switcher was added to see if there’s an option controlling its visibility on desktop.

If you’re unable to locate this setting, it may be helpful to contact the theme author for guidance.

2. Alternatively, add the following CSS to the theme’s custom CSS section:

.menu-item.wpml-ls-item a.desktop-link-hide {
    display: block !important;
}

Please let me know the results,
Thank you

desktop link hide class.jpg
after adding the CSS.jpg
November 4, 2024 at 4:37 pm #16362478

samD-19

It was indeed a new setting in the theme's (Porto Theme) header after updating the headar. I had to add the css too to fix it completely.

Thanks for the quick response