Adding localization to a client's site is a big deal... but it's only a big deal if your website visitors see the locale switcher options, and if your client is proud of how their site looks.
We wanted a way to make the locale switcher stand out in a big way as a new site feature.
UPDATE - 14-Mar-2024
Webflow has added native image support to localization. You should be able to fully build this feature without needing any custom CSS.
Learn more
The solution we designed;
To create the version I have here;
Follow Webflow's build process for a merged dropdown + Locale Switcher.
For your flags, you can go with many different stylings, e.g.;
For clarity, here's the simplest implementation, flags only.
Remember;
Even though the flag images are on a highly efficient CDN, users will likely see a flicker before those images load. That can be prevented by encoding those images to base64 content and inlining them in the CSS.
Here's how...
The url() format for base64 content is prefixed with this exact string, followed by your base64-encoded image;
data:image/svg+xml;base64,
Notes