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
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 changes here, make sure to click on "Save changes".
You can also find the "Switcher Appearance" section down on the page, where you can drag and drop the language you want and change its position in the language switcher:
In this section, you also have the possibility to change the name of the languages, and the flags displayed on your language switcher if you prefer to display the flag of another country or to use your own flag (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 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
Have any feedback on this article? Let us know!