Skip Navigation

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

Problem:
The client wanted to make the border and arrow of the drop-down menu of his "Custom Language Switch" invisible on his website.

Solution:
If you are experiencing this, we recommend that you add the following custom CSS in the 'Additional CSS' section of the language switch settings:

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {
display: none !important;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu,
.wpml-ls-legacy-dropdown>ul,
.wpml-ls-legacy-dropdown>ul li,
.wpml-ls-legacy-dropdown>ul li a {
border: none !important;
}

This should hide the arrow and remove the border from the dropdown. You can find more details in our documentation on how to troubleshoot styling and CSS for language switches here.

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, 3 months ago.

Assisted by: Noman.

Author Posts
February 15, 2024 at 10:09 am #15305809

marinaB-20

Hello.
I made a "Custom Language Switcher" for my website (dropdown menu).
Is it possible to make the border and arrow of the drop-down list invisible for this switch?

I tried resetting the border color in the “Custom language switcher” and change settings in the elementor, but it didn’t work.

On your website says that in “Language switcher settings” - “Additional CSS” I can insert code with own settings.

Is it possible to insert what I want to do into this field?
And what code should I put there?
Thank you.

Switcher.jpg
February 15, 2024 at 10:31 am #15306364

Noman
WPML Supporter since 06/2016

Languages: English (English )

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

Hi,

Thank you for contacting WPML Support. Yes, you can add Custom CSS in that section, you should be able to hide the arrow and remove the border by adding the below CSS in custom CSS section:

.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after {
	display: none !important; 
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu,
.wpml-ls-legacy-dropdown>ul, 
.wpml-ls-legacy-dropdown>ul li, 
.wpml-ls-legacy-dropdown>ul li a {
	border: none !important; 
}

And it will look as in the attached screenshot.

Here is a doc for more details:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/

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

Thank you

dropdown open.png
dropdown close.png
February 15, 2024 at 3:38 pm #15308430

marinaB-20

Thank you!
Everything works!👍

February 15, 2024 at 3:39 pm #15308434

marinaB-20

Thank you!
Everything works!👍