Here are a few examples of customizing your language switcher via CSS. This is recommended for advanced users because some basic coding knowledge could be of use.

language switcher ids

All language switchers are using the id "ly-languages-switcher", with the exception of the Image Dropdown switchers.

That said, you could for instance change the width of your language switcher using the following CSS snippet:

#ly-languages-switcher {

  width: 120px !important;

}

The Image Dropdown switchers are using the id "ly-slick-languages-switcher" so the above example would change to:

#ly-slick-languages-switcher {

  width: 120px !important;

}

language link classes

If you are using a link based switcher, you can style the links using the class "ly-languages-switcher-link".

Here is an example of how to change the color of your language links to red (click here for a list of other colors, just replace the HEX-Value below):

.ly-languages-switcher-link {

  color: #FF0000 !important;

}

The currently selected language can be styled using the class "current_lang".

Using the following code, you can hide the currently selected language link:

.current_lang {

  display: none !important;

}