Adding Locale flags to locale switcher?

Hi, does anyone know if you can add flags to the locale switcher menu for each locale?

2 Likes

Also looking for this

Me too!

Also the current states on locale links don’t seem to work properly…

Can’t you just add a linkblock, put in a image and a textblock inside, hook those up to the locales, Hook the image to a propperty and add a flag icon for each? Linkblocks work btw.

They seem to work here, how did you hook them up?

I’m currently binding a data-value to the iso code and replacing each item with that data-value with a flag icon. You can assign every ISO code with their own country flag:

$('[data-value="en"]').each(function() {
    $(this).replaceWith('<img src="https://uploads-ssl.webflow.com/643006af9e6f61169be0dfb1/6568a5f39fce3aa1be8dae5d_united-kingdom%20(3).svg" style="width: 1rem;">');
});
1 Like

Ah this is great. Ill have a look at this tomorrw.

Hi Rory, thanks, works great.

Find flag icons online (make sure they’re free to use), and then you can typically customize your menu with HTML/CSS or using a localization plugin if you’re using a CMS like WordPress.

This works fine when you want to display a flag next to the current language, but unfortunately it doesn’t work in the pulldown list of different languages.

It does, I build this, style to your needs (fancy, modern) . You should be able to copy this, plug this in and it should resolve a list of languages, if EN (English) DE (Deutsch) are there it probably will pull DE / EN flags. Change flags as needed in code spots webflow.

Ha! Why yes you can.
This is Webflow’s recommended locale switcher / dropdown hybrid, plus an extra div, a few style tweaks and a bit of custom CSS to display the flags and localized locale name. And, there are zero local assets needed for the flags, everything is served by an external CDN.

My fav thing though is the mobile view; I found it was too buried if it appeared under the hamburger menu.

Super happy with it.

image

Thanks !!! Sorted it out for me!

This looks very promising, i’d like to try this. Could you tell me where i need to put the code? :slight_smile:

Hey Michael, do you need an enterprise plan to be able to do this? This is exactly what I want for a client website, but she’s only on a basic plan because that’s really all she needs. But it seems I can’t edit the flags, or the navigation styling in the secondary language unless she has an Enterprise plan?

Hi @rachelmess, no you don’t need Enterprise.
I’ve done a writeup on my approach to this actually, with video.

Give it a try and let me know how it works for you.

1 Like

Hey @memetican , thanks so much! I’ve watched the video a few times, and tried to copy how you’ve built this out but there’s a couple of things I’m not getting.

In the dropdown, I’m not able to add the locale-name and flag into the locale-item, as you’ve done. It seems like this is because it’s a link though, so I’m not sure how to move forward there. I think this is what’s causing the locale name to appear twice.

The other thing is I’ve added in the embed element with the code you provided, but the flags aren’t appearing :pensive:

I’ll pop my read-only link here, if you have time to have a quick look and see if you can figure out what I’ve done wrong then I’d really appreciate it.

https://preview.webflow.com/preview/shepherdess-business-services?utm_medium=preview_link&utm_source=designer&utm_content=shepherdess-business-services&preview=022d54560a43aa69e78548f3be5f14c2&locale=en&workflow=preview

Looks like you’re almost there, I think the main problem is that you have a link rather than a link block, so you can’t drag your flag and text inside of it to complete the menu item.

@memetican Thanks for the writeup on your approach. That was extremely helpful as I wanted to make a toggle between 2 languages and style the current language but couldn’t get it to work in Webflow. I also wanted to use text other than the available options (ISO Code, Locale Name) so your example helped me figure it out.

Thanks @Keven I’ve just re-recorded that yesterday and broken it down into five lessons, since there are a lot of configuration options.

@rachelmess I’ve redone the piece as well that explains the change needed to convert the link into a link block so that your flag can be inside.

1 Like