How to change the design of the language switcher?

In this article, you’ll see how to customize your language switcher and change the way it looks

Using Weglot, you have the possibility to change the design of your language switcher, in order to do that, you have several possibilities:

1. Change the language switcher options
2. Add some custom CSS
3. Some examples of custom CSS


1. Change the language switcher options

If you go on your Weglot Dashboard > Settings > Language switcher, you'll have the possibility to change some elements and display:

  • The language name (such as "en" for English for example)
  • The full language name
  • The language flags and the type of flags (square, circle, rectangle)
  • The type of switcher (list/dropdown)

If you make any change here, make sure to click on "Save changes"

You also have the possibility to change the flags displayed on your language switcher if you prefer to display the flag of another country (see: How can I change the flags of the language switcher?)

2. Add some custom CSS

On your Weglot Dashboard > Settings > Language switcher, you have the possibility to add some custom CSS:

Feel free to get inspired by different styles and to add your own CSS. You'll find some examples of custom CSS in the next part

3. Some examples of custom CSS

Usually, we do not provide custom CSS designing for our users as it falls outside of our scope and is best suited for a designer but we propose some examples of custom CSS that you can copy on this guide

Still need help? Contact Us Contact Us