Creating Language Switcher (Dropdown) HTML + CSS with Flexbox

Great language switcher dropdown menu for your website with HTML & CSS only

Subscribe to our channel for more 🤖

Follow us and join or community!

Checkout our courses!
👉 React Native: Learn By Doing Movies App [2021]
👉 MERN Stack E-Commerce Mobile App with React Native [2021]
👉 MEAN Stack E-Commerce App: Angular 12, NX, PrimeNg [2021]
👉 NodeJs: Build The Complete E-Commerce Web API [2021]

🚨 Get a free month and watch our courses for free in SkillShare

[tn]

I think you should use "visibility: hidden/visible" instead. It prevents that element from moving. Great video, it's really helpful

[tahirmathin]

This was amazing . you explain very well. Most of the other people don't realy explain very well.you do, for example the jumping thing that happend before putting the position as absolute. Many people just write it down and don't tell why and what is it for.

[HexerMain]

Great tutorial! Can you also make a video about how to actually make the language on the website change? Maybe using JS? Would love to see that! You'ev got my sub! Keep it up man! You're really experienced and I love that you explain and show all steps! Props!

[jamieadah]

i can't find the country flags site. Says 'server not found' is there another way to do this?

[mugen]

Great tutorial. Very easy to follow and I have learned many new things.

[Phagocytosis]

This is great, thank you! My only issue was that if I hover even a little bit below the selected language, it already showed the ul. I just had .lang-menu: hover ul { display: block; }, of course. Turns out that if I add a height parameter to .lang-menu {}, that works out. I set it to 35px, as well as the top parameter in .lang-menu ul {}, and that worked a charm. Thanks again :)

[danny_racho]

أحلى أبو الفود. خمسمية محروقة لل badding
بس لا ولله تعلمت كتير. تسلم أيديك

[maze]

Hello! I know this is very late to ask, but will you ever upload a video on how to make the website actually change the language also by using HTML/CSS or if you don't make a video just upload the code somewhere so i can study it. Thank you so much it would be lovely!

[dagemdebebe]

Thank You Sir. It is one of the best tutor in multi lingual. Can you make a simple tutorial how to insert a word in different language like chinese or Arabic or other in Html input form, like name or nay plain text ? Thanks.

[seraphiaarks]

Thank u! The instructions are very clear. Very nice video!

[CRBarchager]

Very nice turorial. The links to the flags don't work anymore. No website with that name.

[FranckFasano]

Many thanks, excellent tuturial help me a lot !

[Phagocytosis]

Oh, but isn't a major thing that is missing the fact that the selected-lang does not get updated, and in particular the background-image in selected-lang:before? That seems really tricky, how could this be done?

[AhmadElkhouly]

Are you Egyptian? Your English is very good. Great tutorial and effort. Thanks!

[MyNery]

Very nice example and explanation, but I can't use it because when you chose a flag it will not show up at the top of the dropdown. It's showing all the time the English flag and English language. I tried to fix this with javascript but the text changes for some seconds and then goes back to the original text. That's a problem when you use rails. I tried to find a solution but until now I couldn't find a way. Can you tell me how I can do it? I want to use it with i18n. Everything is working fine. Locales are changing.

[igorsbondarevs]

Whenever i click on the box it dissapears when i try to hover over the other languages in the box, Whats the soloution for this?

[apelsinik]

Thank you very much, you helped me a lot.

[jxzh-me]

Y’all don’t have to make it an href, just put in cursor: pointer; into the CSS code of the Element

[VisionartoStudios]

How do I add both HTML and CSS INTO a Google Site? I am a newbie into webpage creation and it seems to only work the HTML code

[DeepakPatel-wewz]

Hlo sir I just want to know that how can i attach this language option in whole website. I mean anyone can change language at any moment