Skip Navigation
Updated
March 1, 2023

Certain themes that feature custom menu generators may not display WPML language switchers correctly. Here, we provide troubleshooting steps for issues related to language switchers styling.

For your convenience, we also present a detailed description of the CSS used in WPML’s menu language switcher, in case you are looking for advanced customizations.

How to Troubleshoot Display Issues with Dropdown and Menu Language Switchers

As in every debugging process, there are some initial steps in order to detect if something is interfering with the rendering of your language switcher correctly.

  1. Temporarily add a footer language switcher which has a very simple CSS and will work on almost any site.
  2. Temporarily remove any custom CSS  and use WPML’s language switcher with its default settings
  3. Use your browser CSS debugger and see if there are obvious CSS conflicts. If you find the cause, you can override the CSS styling on the WPMLLanguages page, under the Language switcher options section. There, click the Additional CSS link.

If there are issues between the theme and WPML, WPML support team will work with our compatibility team and the theme author in order to provide you with a proper solution.

CSS Classes per Language

The following is the list of the CSS classes for each language:

  • wpml-ls-slot-{slug}: e.g. “wpml-ls-slot-sidebar-1”.
  • wpml-ls-item.
  • wpml-ls-item-{language_code}: e.g. “wpml-ls-item-en”.
  • wpml-ls-current-language: only for the current language item.
  • wpml-ls-menu-item: only for language switchers in menus.
  • wpml-ls-first-item: to target the first language item of the list.
  • wpml-ls-last-item: to target the last language item of the list)

If altering CSS classes for each languages is required, WPML offers the wpml_ls_model_language_css_classes filter hook.

For example, let’s say that you need to add a my-custom-item-class class for every language. In that case, you can add a code like the following to your theme’s functions.php file:

Using the wpml_ls_model_language_css_classes filter hook
add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

Language Switcher Wrapper CSS Classes

The following is the list of the CSS classes for the language switcher wrapper:

  • wpml-ls
  • wpml-ls-{group}-{slug}: e.g. “wpml-ls-statics-footer”.
  • wpml-ls-{template-slug}: e.g. “wpml-ls-legacy-dropdown-click”.
  • wpml-ls-rtl: for RTL languages.
  • wpml-ls-touch-device: this class is added for mobile and tablet devices.

In the following table we show how CSS classes are build depending on the {group} and {slug}:

DescriptionGroupSlug
Language switcher in footerstaticsfooter
Language switcher for post translationsstaticspost_translations
Custom language switcherstaticsshortcode_actions
Language switcher as a widgetsidebars{sidebar_slug}
Language switcher in a menumenus{menu_id}

As before, if you need to add a custom CSS class for your language switcher wrapper, you can use our wpml_ls_model_css_classes filter hook. A code like the following in your theme’s functions.php file will add a my-custom-wrapper-class CSS class:

Using the wpml_ls_model_css_classes filter hook for a language switcher wrapper
add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

Note: WPML only injects some elements for the language switcher option in menus. As a consequence, it does not have any wrapper class.

Customizing a Language Switcher with CSS

We can easily add some custom CSS styles in WPMLLanguages page, under the Language switcher options section. There, click the Additional CSS link.

Example 1: Displaying the current language in bold

Displaying the current language in bold
.wpml-ls-current-language {
font-weight: bold;
}

Example 2: Changing the font size only for the language switcher in the footer

Changing the font size only for the language switcher in the footer
.wpml-ls-statics-footer {
    font-size: 18px;
}

Example 3: Giving some margin on the right after the last language item

Giving some margin on the right after the last language item
.wpml-ls-last-item {
    margin-right: 10px;
}

You can also combine selectors to have a better target.

Example 4: Adding bold text for the current language of the language switcher in the footer

Adding bold text for the current language of the language switcher in the footer
.wpml-ls-statics-footer .wpml-ls-current-language {
   font-weight: bold;
}

Example 5: Fixing the width of a language switcher in a menu

Fixing the width of a language switcher in a menu
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}
Flags-only language switcher with Twenty Sixteen theme
Menu language switcher after applying the custom CSS