CSS: Highlight selected language option

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: Exception

This topic contains 1 reply, has 2 voices.

Last updated by Mihai Apetrei 1 year, 3 months ago.

Assisted by: Mihai Apetrei.

Author	Posts
August 18, 2023 at 3:59 am #14249361
jasonD-27	Tell us what you are trying to do? I've got two buttons offering choices for the two languages offered on the site. English and French. I want to find a way to highlight the selected language. Is there any documentation that you are following? No. But here's the code generated by the Elementor widget: <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-en wpml-ls-current-language wpml-ls-first-item wpml-ls-item-legacy-list-horizontal"> hidden link" class="wpml-ls-link"> <span class="wpml-ls-native">EN</span> <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-fr wpml-ls-last-item wpml-ls-item-legacy-list-horizontal"> hidden link" class="wpml-ls-link"> <span class="wpml-ls-native" lang="fr">FR</span> Is there a similar example that we can see? Not sure. What is the link to your site? hidden link but you may not be able to see it.
August 18, 2023 at 5:21 am #14249403
Mihai Apetrei Supporter Languages: English (English ) Timezone: Europe/Bucharest (GMT+02:00)	Hi there. Before this ticket gets assigned to my colleagues, I will try to help. You can use the CSS class ".wpml-ls-current-language" and target it with the right CSS styling that you want. This CSS class is always assigned to the current language button. Mihai Apetrei
August 20, 2023 at 9:29 pm #14259333
jasonD-27	Mihal, that's it. I added this to my Elementor widget: .wpml-ls-current-language .wpml-ls-link { background: #FFF; color: #9F1D39!important; } Yea, you need that !important to the color style.