Skip to content Skip to sidebar

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

Problem:
The language switcher was not showing on mobile header.

Solution:
https://wpml.org/forums/topic/floating-language-switcher-in-mobile-header/#post-14870551

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 contains 1 reply, has 2 voices.

Last updated by Noman 1 year, 8 months ago.

Assisted by: Noman.

Author Posts
November 19, 2023 at 11:26 am #14870215

timmR

Tell us what you are trying to do?
I am trying to add a custom toggle to my mobile menu header, as explained. I want the switcher to be fixed where you can see the red square right now. The red square is made by css background-color of the implemented hook, So I assume it generally works It just does not show the "EN"-Text.
But: There's no content shown. If I add that hook to footer or any other location, it works as it's supposed to work.
The other hook "Rosin" also works flawlessly.

Is there any documentation that you are following?
Yes, here:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/adding-language-switchers-using-php-and-shortcodes/?utm_source=plugin&utm_medium=gui&utm_campaign=languages

and here:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-switcher/

Is there a similar example that we can see?
Sadly not.

What is the link to your site?

November 19, 2023 at 1:00 pm #14870551

Noman
WPML Supporter since 06/2016

Languages: English (English )

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

Hi,

Thank you for contacting WPML Support. I’ve examined the source code of your site and find out that the some CSS is hiding the language switcher in the header and you should be able to override it by using the below CSS:

#mobile-header .wpml-ls-statics-shortcode_actions ul {
    display: block !important;
}

In the custom CSS section of your theme and it will look as in the attached screenshot.

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

Thank you

mobile switcher.png
CSS conflict.png
November 19, 2023 at 1:52 pm #14870693

timmR

Thanks a lot for your quick help!