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.
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 :)
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!
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!
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?
All I came up with is making new html files for each language, as if you were making side pages. You basically copy/paste your index file, change the "selected-lang" to something else i.e. selected-lang-fr for french. Then in your css file you need to copy/paste .selected-lang and selected-lang:before paragraphs as many times as much languages you have on your list, change the flag url and ajust the width value so different language names fit their flags. Looks like a lot of repetitions and kind of hurts my soul... I hope there is some more efficiant way to specify those things only once like any self-respecting programer would do. You need to translate entire website content anyway... So you will end up with all your side pages' files multiplied by the number of languages...
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.
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.
Perhaps you put the 'top' pixels to too high of a number in .lang-menu ul, so that the actual dropdown menu shows a little bit detached from the button. That way, if you move the mouse toward the dropdown menu options, it first leaves the menu, thus removing the hover effect. When I tried 40px, I had that problem at first, but when I reduced to 30px it was fine. (Specific numbers probably depend on your precise implementation.)
@@BlueBitsAcademy In selected_lang:before, the default language's flag is coded in as the background image by default, so if you select another language, it will still show the flag of your default language. I implemented some PHP to allow the other content on the page to change depending on the language selected (thanks to another tutorial), but I don't know how to figure it out for the background image, since that's done inside a CSS file and it does not seem easy to make PHP interact with that.
@@igorsbondarevs8717 what description ?? I dont want de source code, on the page where are the flags there is no option to see for ex if a slovakian flag has what code...
Bad example. Flags reprent countries not languages. There can be several official lanaguges in a country. A given language can be spoken in many countries. This just doesn't work. Its culturally obnoxious, and offending.
That seems a bit overly sensitive. Most sources do it this way, and for most major languages, you can probably choose a country that has that particular language as its only official language. And anyway, what would be the alternative? Languages themselves don't typically have flags or other clearly recognizable symbols associated with them.
![[안방1열 풀캠4K] 베이비몬스터 'DRIP' (BABYMONSTER FullCam)│@SBS Inkigayo 241110](http://i.ytimg.com/vi/AQ4RIghEvUs/mqdefault.jpg)
I think you should use "visibility: hidden/visible" instead. It prevents that element from moving. Great video, it's really helpful
That's a great advice!
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.
Thank you , your commnent is very nice :) , you are welcome always
i can't find the country flags site. Says 'server not found' is there another way to do this?
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 :)
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!
Why do I have to go throuth ALL This! Where is the Spanish language button?
Great suggestion!, I will do it with javascript yes
@@BlueBitsAcademy Hi, I was wondering have you made this already? (make the language on the website change)
Thank you.
@@BlueBitsAcademy did you doi it ?
@@BlueBitsAcademy hey i wanted to see if you have made this video already? It would be of great help!
Very nice turorial. The links to the flags don't work anymore. No website with that name.
Great tutorial. Very easy to follow and I have learned many new things.
Glad you enjoyed it!
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!
Y’all don’t have to make it an href, just put in cursor: pointer; into the CSS code of the Element
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?
All I came up with is making new html files for each language, as if you were making side pages.
You basically copy/paste your index file, change the "selected-lang" to something else i.e. selected-lang-fr for french. Then in your css file you need to copy/paste .selected-lang and selected-lang:before paragraphs as many times as much languages you have on your list, change the flag url and ajust the width value so different language names fit their flags.
Looks like a lot of repetitions and kind of hurts my soul... I hope there is some more efficiant way to specify those things only once like any self-respecting programer would do. You need to translate entire website content anyway... So you will end up with all your side pages' files multiplied by the number of languages...
Thank u! The instructions are very clear. Very nice video!
You are welcome!
أحلى أبو الفود. خمسمية محروقة لل badding
بس لا ولله تعلمت كتير. تسلم أيديك
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.
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.
One of solutions to cure "disappearing list" is to change .lang-menu .selected-lang:before {width} to a bigger number
Many thanks, excellent tuturial help me a lot !
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?
Perhaps you put the 'top' pixels to too high of a number in .lang-menu ul, so that the actual dropdown menu shows a little bit detached from the button. That way, if you move the mouse toward the dropdown menu options, it first leaves the menu, thus removing the hover effect. When I tried 40px, I had that problem at first, but when I reduced to 30px it was fine. (Specific numbers probably depend on your precise implementation.)
Very helpful tutorial. easy to learn👌
How does the language work? I wanted to see that part
same vvs... same...
Are you Egyptian? Your English is very good. Great tutorial and effort. Thanks!
Thank you very much, you helped me a lot.
Sir, u r calling fonts n others via import from google, what if u r going offline for some reason? It"ll not work, how can i solve it
If i want to just show the flag and that once u click , It changes languague how would i do It ?
Isn't responsive for mobile??
languages are not change
when i put this code on my website
Tks so much bro :D
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
Is it possible to make this dropdown menu also avaible on mobile phones? When you look at a website on a mobile phone it doesn't work.
I can do that in another tutroial, soon :)
How does this work on mobile?
js part ?
Nice , thanks bro
Today 12/12/2023, thanks!
9:17 the .selected-lang:befor doesn’t work the {} don’t recognize the css code anymore. Any1 knows why?
please .. can you program it for me so that if you click it can be translated?
You're welcome. need the code. i need it by thursday
Doesn't change flag...
we need how to converting many lang not only style css
Thanks man
thanks man!
Thanx buddy 😌
Hi, thanks but the UL tag with the languages shows back another elements. How can I fix this ?
This may be too late but to fix the issue, remove the top:45px or set it to 0
@@Rob3445 thanks. I have to change all code or do that of another way to continue working .
@@Rob3445 35px is perfect
can someone tell me the website that he take the flags and code from, cuz i can't find it?
I think it’s website is down
Great video👍
👏🙏Thank you a lot)))🙂
my flag doesnt change
(((
Hi, I've got same problem. Did u sort it out?
why its not changing? , i mean what is the problem?
@@BlueBitsAcademy In selected_lang:before, the default language's flag is coded in as the background image by default, so if you select another language, it will still show the flag of your default language. I implemented some PHP to allow the other content on the page to change depending on the language selected (thanks to another tutorial), but I don't know how to figure it out for the background image, since that's done inside a CSS file and it does not seem easy to make PHP interact with that.
very very very amazing!!!!!!
Thank you very much!
thanks very much
Always welcome
Thank you
You're welcome
Don't Use English As US Flag
топ
🇮🇶🤗thank you
that site is such a BS with those flags how the hell do I know which flag has what code ??? i cant find it
description
@@igorsbondarevs8717 what description ?? I dont want de source code, on the page where are the flags there is no option to see for ex if a slovakian flag has what code...
@@juliusparajos4173 ur blind
Bad example. Flags reprent countries not languages. There can be several official lanaguges in a country. A given language can be spoken in many countries. This just doesn't work. Its culturally obnoxious, and offending.
Bruh
That seems a bit overly sensitive. Most sources do it this way, and for most major languages, you can probably choose a country that has that particular language as its only official language. And anyway, what would be the alternative? Languages themselves don't typically have flags or other clearly recognizable symbols associated with them.
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