Skip Navigation

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

Problem:
The client is trying to display the language switcher in the secondary menu on mobile view and wants to remove an overlapping dark grey background.

Solution:
We recommend including a custom language switcher and using a CSS media query to make it visible only on mobile view. Here are some guides to help you:

To change the background color, you can modify the CSS rule provided by the theme:

.secondary-navigation ul ul {<br />    background-color: #303030;<br />    top: auto;<br />}

For example, to have a white background and adjust the width, use the following code:

.secondary-navigation ul ul {<br />    background-color: #ffffff;<br />    top: auto;<br />    width: 65px;<br />}

You can add this to the Customizer's additional CSS settings or create a child theme and include it in the style.css file.

Please note that this solution might be irrelevant if it's outdated or not applicable to your case. If the issue persists, we highly recommend checking related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If you still need assistance, 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.

This topic contains 4 replies, has 2 voices.

Last updated by Andreas W. 1 year, 2 months ago.

Assisted by: Andreas W..

Author Posts
March 9, 2024 at 1:49 pm #15391498

maikK-11

Tell us what you are trying to do? I put the language switch in the secondary menu and it do not show in the mobil view.

What is the link to your site?
hidden link
This is a development site, where I prepare the page before it goes online.

Screenshot_4.png
March 9, 2024 at 4:25 pm #15391696

Andreas W.
WPML Supporter since 12/2018

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

Timezone: America/Lima (GMT-05:00)

Hello,

The menu language switcher is supposed to be inside the hamburger menu icon on mobile view, as it is part of the menu.

You could in this case include a custom language switcher and use a CSS media query to make it only visible on mobile view.

Guides:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/adding-language-switchers-using-php-and-shortcodes/

https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-display-or-hide-the-language-switcher-on-specific-pages/

hidden link

Best regards
Andreas

March 10, 2024 at 4:03 pm #15392714

maikK-11

I still working on that issue.
But I have problems to open a new issue. Your side make this quite complecate:
So my problem is may be simple, but I do not know where to look anymore.
In the image you see the Menu language switcher. Now I want to know, where and how can I take this overlapping darkgrey background (2) away, and where can I change that background color (1)
Thank you
Maik

March 10, 2024 at 4:03 pm #15392715

maikK-11

sorry here is the picture

WPml-top design.png
March 12, 2024 at 2:03 pm #15399922

Andreas W.
WPML Supporter since 12/2018

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

Timezone: America/Lima (GMT-05:00)

Please take note, that this is not a WPML issue, as the design is controlled by the theme.

The CSS rule coming from the theme is:

.secondary-navigation ul ul {
    background-color: #303030;
    top: auto;
}

Using this role you can change the background-color and the width.

For example, using this instead, you can have white background and a width adjustment:

.secondary-navigation ul ul {
    background-color: #ffffff;
    top: auto;
    width: 65px;
}

Add this to the Customizer's additional CSS settings or create a child theme and include in the style.css file.

Best regards
Andreas