Skip Navigation

Home › Support › English Support › [Resolved] Main menu drop down for language switcher bad css

[Resolved] Main menu drop down for language switcher bad css

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

Problem:
The client is experiencing an issue where the drop-down language switcher in the main menu has bad CSS and does not appear as expected.
Solution:
We recommend applying custom CSS to adjust the appearance of the WPML language switcher dropdown. You can add the following CSS code to the custom CSS section of your theme to make the language switcher align better with your site's design:

.wpml-ls-item ul.sub-menu {<br />    margin-top: -50px;<br />    min-width: 78px !important;<br />}

Please note that this solution involves customization that might not be supported in the future due to potential changes in the theme or WPML code. If this solution does not resolve your issue or if it becomes irrelevant due to updates, 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 further assistance is needed, please open a new support ticket at WPML support forum.

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

Last updated by ivanL-20 2 months, 3 weeks ago.

Assisted by: Noman.

Author Posts
January 20, 2025 at 3:09 pm #16614141

ivanL-20

Background of the issue:
I am trying to make the drop-down language switcher in the main menu look normal on my site hidden link.

Symptoms:
The main menu drop-down for the language switcher has bad CSS.

Questions:
How can I make the drop-down language switcher in the main menu look normal?
January 20, 2025 at 4:26 pm #16614767

Noman
WPML Supporter since 06/2016

Languages: English (English )

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

Hi,

Thank you for contacting WPML Support. Please note that WPML language switcher dropdown takes formatting from the currently activated theme to make the style consistent with other menu items. To override that style on wpml language switcher dropdown you may try to use the below CSS:

.wpml-ls-item ul.sub-menu {
    margin-top: -50px;
    min-width: 78px !important;
}

In the custom CSS section of your theme, 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.

Please understand that I'm helping you here with an issue that is out of the scope of our support forum and we will not be able to support this particular fix in the future. Because the theme or our code might have changed, so please always be aware of this. Right now it's working without any issue.

Thank you

language switcher dropdown.jpg
January 20, 2025 at 9:48 pm #16615659

ivanL-20

Hi Noman, thank you for quick reply.
I need a little bit more fine tuning.
I set background transparent, margin-top: 78px and margin-left:-26px; -> desktop looks ok on 24" full hd monitor.
Now on mobile phone is bad position of english flag.
Thank you.
January 21, 2025 at 1:17 pm #16618647

Noman
WPML Supporter since 06/2016

Languages: English (English )

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

Could you please replace the previously added CSS with this one:

@media (min-width: 1200px) {
  .wpml-ls-item ul.sub-menu {
    margin-top: -78px; 
    min-width: 78px !important; 
    background-color: transparent !important; 
    margin-left: -26px; 
  }
}

And see if this resolves the issue.

Thank you for your cooperation and patience

mobile view 1.jpg
January 21, 2025 at 2:37 pm #16619360

ivanL-20

Hi Noman,
On desktop is perfect.
On mobile, flag needs to be little bit more to the left (pic in attachment). I use Samsung S22 Ultra (if you need this info because of resolution).
Thank you.
Best regards.

Screenshot_20250121_153256_Chrome.jpg
January 21, 2025 at 3:08 pm #16619536

Noman
WPML Supporter since 06/2016

Languages: English (English )

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

Thanks for the additional details. Could you please try to use the below CSS for mobile view: 

@media (max-width: 1200px) {
.pxl-menu-primary .sub-menu li.wpml-ls-item a, 
.pxl-menu-primary .children li.wpml-ls-item a {
	padding: 0 12px !important;
}
}

You may adjust it according to your needs if needed, and it will look as in the attached screenshot.

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

Thank you

mobile switcher CSS.jpg
January 21, 2025 at 6:28 pm #16620172

ivanL-20

Noman, thank you so muck on quick reply.
Everything works fine.
Best regards.