bjornB-33

Problem:
The client needed to customize the hover effect color of the language button from black to blue (#002fa7) and the background color of the alternative language options from grey to light blue (#B3E5FF) in WPML.

Solution:
We fixed this by adding the following CSS code in the WordPress Customizer under Appearance -> Customize -> Additional CSS:

a.dropdown-toggle.cursor-init:hover {
    color: #002fa7 !important;
}

span.wpml-ls-native:hover {
    color: #002fa7;
}

ul.dropdown li.wpml-ls-item {
    background-color: #B3E5FF !important;
}

ul.drop-menu > li.wpml-ls-item, ul.drop-menu > li.wpml-ls-item > a, ul.drop-menu > li.wpml-ls-item > a > span, ul.drop-menu > li.wpml-ls-item > a > i {
    background-color: #B3E5FF;
}

ul.drop-menu > li.wpml-ls-item > a:hover > span {
    color: #002fa7 !important;
}

ul.drop-menu > li.wpml-ls-item > a > span:hover {
    color: #002fa7;
}

.submenu-dark .menu-horizontal .menu-smart ul {
    background-color: #B3E5FF;
}

Please note that this solution might be outdated or not applicable to your specific case. 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 this does not resolve your issue, please open a new support ticket at WPML support forum.