How to Create Responsive Navigation Bar using HTML and CSS

[@CodingNepal]

If your icons aren't showing, replace the line no.8 script of index.html with this:

[@bestmoments4908]

In navigation place instead of hover option is any way is available to click action Becuase while moving cursor in any other place is disappear

[@vaibhavbhandare7177]

Html5 css3 js website demo please

[@GamingUpToDateNP]

mero chalena

[@WonderD0]

@@AbhishekKumar-sm7or po

[@manfredpiehler4370]

@Hangeldi Atajanov You neet a Wix ad (script.js)

[@cubebrothersbn]

I just want to thank you for 3 reasons: 1. For being so helpful by replying on the comments of people's doubts! 2. For giving the source code(with a few necessary details) 3. For making this wonderful tutorial! And thus,you got yourself a subscriber..Keep helping us like that!

[@CodingNepal]

Thank you so much for your appreciation.. Stay tuned 💙

[@gamingandinfopoint6679]

Hey man can u please give me a source code here !

[@desarrollou71x72]

i want to thank you too.. we need people thanking people who help people too..

[@guilhermexavier8746]

Never thought i could cry making a nav bar, but this music got me

[@CodingNepal]

☺️☺️

[@karlabellana9294]

@@CodingNepal WAHAHAHAAHAHAHHA me too im about to cry now :(

[@walberamorimsp]

Ahahaha

[@jindagigulzar7917]

Same here brother

[@sulaimandev]

😂😂

[@Michael-ls7lu]

Handy tip for all you devs out there when making an unordered list in visual studio. Instead of copy-pasting the element several times, hold Alt and Shift and press the down arrow to duplicate the current line. Press the down arrow as many times as you want to duplicate even more. Also, I'm not sure about using left: -100% and left: 0 to move the menu instead of transform: translateX(-100%) and transform: translateX(0). If I recall correctly transform is more performative than using left. Great tutorial though, I'm looking to use more CSS only solutions in my own designs.

[@oltomcat2106]

Thank you sir 👍

[@Hrit]

Thanks :)

[@cureadan-emilian2579]

or you can use ul>li*3 and you will have 3 of li nested in ul ;P

[@coolberggaming5390]

Ohh wow this just help me a lot👏🏾👏🏾 THANKS!!

[@veronicajarido3743]

Good input. Also for Mac you use combination of Option + shift and down arrow.

[@HoangNguyen-zv3xb]

this is what I need. No talking, no explanation just a master at work demonstrates how it's done. I learned so much in 7:59 mins. Thanks a lot!

[@mbahchris1188]

Sometimes talk is important cause I didn't know why he did some things here

[@victoriaburns296]

@@mbahchris1188 once you learn what each thing do then it’s easy to follow along

[@Loomisheep]

@@victoriaburns296 if we're watching this tutorial then you realise it's because we don't know a lot in CSS, otherwise we wouldn't be here

[@victoriaburns296]

@@Loomisheeploud and wrong. What I was saying is knowing the basics will help you understand. If you’re not good with CSS then you should t be watching this video yet. All because you know basic CSS doesn’t mean you automatically know what you can do with it and that’s why most people are watching so you can go be rude somewhere else sweetie

[@morriszin4742]

He is talented in creating websites. Me: i am talented in watching the talents of others

[@CodingNepal]

Hahah 😂😂

[@Yoshitha-fq9en]

Same here😆

[@bridget7223]

you made me chuckle for i too am talented at watching the talent of others

[@asifhossain2088]

@@bridget7223 lol

[@syukronofficial8023]

one voice

[@r-chuck6]

I generally dont comment on youtube videos but this is the best and the simplest of tutorials on navbar on internet. I cant express my gratitude to you for this tutorial. I have literally searched for 2 days about how to make a simple navbar until i came across your video.

[@chrisvaughan2462]

Who chose the music? Came here for burger bar and left suicidal 😭😭😭😭

[@anshupriya3313]

😂😂😂ishliye roo rahe hoo

[@oussama1811]

ikr, I don't even know if I want to finish my project anymore..

[@Geethen]

​@@oussama1811 😂😂😂

[@Geethen]

​@@anshupriya3313😹😹😹

[@anshupriya3313]

@@Geethen 🤣😆

[@karunakarkoyada69]

we need to use ->(area-hidden="true") inside tag, to get hamburger.

[@hawiedawitt]

That was so amazing, I couldn't imagine myself learning how to make a responsive nav bar in under 10 mins.... You're the best pal🚀🚀

[@oltomcat2106]

You might help me? Woud be greatI can't get it to work. Fontawesome link is called different and no icon appears. I am not shure if its the link or the fas fa-bars command or an interaction of it, is the issue, why no icon appears. I did everything exactly by template. By the way: Original files even don't work (no menu icon with its function).

[@jojiratuva6631]

took me ages to figure it out but i managed to make it work and then bootleg it in my own code. awesome stuff man.

[@jagadish20091]

I really like this video! I have been browsing KZbin for a while now to find a video like this. Love from India. :)

[@CodingNepal]

Keep watching and supporting :)

[@AnkitThakur-gz2po]

Huge fan from Punjab,india,Nepal after the nepali prime minister's comment on god ram all indian decided to call themselves as a nepali lots of love from india,Nepal

[@CodingNepal]

Haha 😂... Keep watching bro

[@Juzzyjuzzy]

Believe me! This is the shortest version I have seen. I am surely adapting this one as a template - as I like less-complicated designs. Thank you so much. I read from somewhere, that if a function can be achieved using CSS and HTML, then there is no need putting an additional Javascript. Thank you for this demo.

[@CodingNepal]

Glad it was helpful!

[@adityarocker7205]

Can't Go back without liking.......👍👍 (background music was so Awesome & relaxing )

[@CodingNepal]

Thank you

[@mcballsitr0n565]

the fact that I got a wix ad make me mad

[@subratbehera125]

Nice idea of using a checkbox as a indicator for activating the menu bar instead of using javascript 😁. 👍👍👍

[@fidbih]

A great trutorial for growing concepts.Specially newbies like me who learned a lot of syntax but still don't know how to apply those and make cool things. It was really helpfull. Best of luck.

[@CodingNepal]

Thank you 💙.. Keep watching

[@fidbih]

You are welcome.❤

[@CodingNepal]

Same problem I had also faced when I was also new in this field.. Then I started channel and for making a video I create a new design per week and uploaded on this channel.. And slowly slowly it became easy and familiar to apply codes and make cool things.

[@CodingNepal]

You're welcome... Keep watching my videos and best of luck for your work.

[@CodingNepal]

Watch my new videos also... You won't be disappointed.

[@pyromius]

I like that you demo in the beginning then again after. Thanks for that.

[@CodingNepal]

Thank you...Keep watching our other videos :)

[@Hrit]

The classical music on the background makes it so peaceful to learn!

[@KuroManX]

Thanks for this video, the key is placing a input checkbox to hold the state of OPEN CLOSE the mobile menu, for a ZERO JS website this is lit!

[@s.m.rakibhasan7772]

Brilliant task you have done, may be I would never forget you. Keep sharing your skills & patience with us. May almighty grant you...

[@CodingNepal]

Many many thanks

[@sunilml2538]

Thanks man, you have no idea how much your video is helping us

[@CodingNepal]

Happy to help!

[@KevinLii-hr4qy]

i love how you can see what every line does :) more channels sound record this way

[@CodingNepal]

Thank you 💙... Keep watching

[@peaceenlightenment9630]

Of all I have seen you have got the shortest videos thank you soo much

[@FunnyStep_BK]

It was way easier to create a responsive navbar using a checkbox as an indicator to activate the menu bar instead of using JavaScript. Thank you for making this amazing tutorial. 😁

[@talha3213]

Hey bro I can't seem to make the toggle button. Can You help me with that.

[@FunnyStep_BK]

@@talha3213 Yes of course, what exactly is the problem that you are facing?

[@talha3213]

​@@FunnyStep_BK Thanks for replying bro, I searched the problem on chatgpt and it suggested that I should import the font-awesome url in my CSS, so I think it solved the issue.

[@FunnyStep_BK]

@@talha3213 Nice 👍

[@Paint-it-Blxck]

YOU SAVED MY EVENING!!!

[@CodingNepal]

Glad to hear that

[@MathinusG]

Thanks, been battling to find just this!!

[@CodingNepal]

Thank you.. Keep watching nd supporting ❤️

[@codingsenju4189]

Thank you for highlighting the meta data at the beginning! I was wondering why my logo was shrinking when resizing the viewport! All it took was that meta tag in the header that sets content to device width!!

[@CodingNepal]

Your welcome :)

[@kondapuramsanjaykumar9358]

Thank u. Em cheppagalam inthakannaa. Really u decreased my stress levels to down about nav bars.

[@djKafelka]

I always struggled understanding css, i get some of it, however your video has helped me finally finish my web project :)

[@CodingNepal]

Glad it helped!

[@uboxtech]

if you'll make your video in voice over, then its over for all coding channels

[@korpos8833]

Great tutorial man, it was so helpful. NIce background music too!

[@CodingNepal]

Thank you.. Stay tuned 😁

[@gilliantv9917]

Big thanks for this. Great help for me for starting learning html and css ❤️

[@CodingNepal]

Glad it was helpful :)

[@EagoraIsa]

I spent hours trying to find something like this. You saved my life. I loved the video and the music

[@CodingNepal]

Thank you and don't forget to visit this channel for more helpful videos.

[@rahulps]

best channel you will get responses for your doubt very fast 👏👏👏👏👏👏

[@CodingNepal]

Thank you bro 💙

[@mayankkhandelwal6224]

Great tutorial! whats impressive is that even the climax is sync with background music! see at 6:29

[@Emekaelo]

😂

[@Qasimovv99]

thans you very much🙂

[@FRONTRUS]

*To the everyone reading this* : Sending Virtual hugs to everyone who needs it, Stay Safe! 😷

[@indianathe3rd742]

What's with the mask

[@shadeify2331]

@@indianathe3rd742 c o v i d ?

[@ashmxuth4919]

awesome video thank you so much for taking the time out to make it idk if anyone else is having this problem because they dont take time to read like myself lol i couldnt get the fas fa-bars to work at first because you have to go to font awesome and get your own personal code took me about 20 minutes to realize that lol figured id comment to see if it saves anyone else some trouble

[@maisamhussaintoorie7119]

You are a real inspiration towards coding Thanks so much #CodingNepla#

[@CodingNepal]

I appreciate that!

[@mikesantiago2492]

Great Tutorial! I am having trouble putting the menu in a block postion. The command is around lines 68 - 76 in the css

[@CodingNepal]

You can download codes from description link.

[@SweetPeachannel]

hi i have same issue. Did you figure out please? hope you don't mind to share.

[@aklimokrane4404]

Great Job

[@CodingNepal]

Thank you... keep watching :)

[@asylated5254]

Thank you very much! I am really appreciated for what you've done! The NavBar looks actually very nice! Next time. I'm going to use your website to follow the codes! Your codes are great!!

[@CodingNepal]

You're welcome bro 💙

[@akshaythummar9148]

i like that you demo in the beginning then again after. Thanks for that.......

[@CodingNepal]

Glad you liked it!

[@Dallaspersonal]

i learned a few things. Only thing i would add is that padding is usually bad practice, especially for nav. The padding exceeds the nav and interrupts other elements from my experience. So even if elements are absolute i still ran into a positional error.

[@danielchang7510]

This is great man, I' m new to coding and was wondering how do you get HTML and CSS ?

[@CodingNepal]

Keep learning..

[@iversonmabbayad6795]

hello why does the is not working on me no background picture is shown

[@iversonmabbayad6795]

i wanna insert some text too how will i insert some text it's gonna be like curriculum vitae

[@CodingNepal]

You have to set proper path of your image like I've set in the background property in css.

[@emmanuelekwere9198]

@@CodingNepal please I don’t still understand. I did everything you did. But still can’t add the pics. Please help. Thanks a lot.

[@dangminhkhai]

menu HTML, css beautiful

[@CodingNepal]

Thank you 💙

[@AH-cf9cv]

for long time we r searching for this... now i found thanks bro...

[@CodingNepal]

You're welcome bro 💙

[@rodolfodirack1246]

A dream tutorial! Just code and classical music...

[@itsgenti8910]

IDK why ... but the 3 lines are not showing in the website even when i try the source code EDIT: NVM is fixed it

[@CodingNepal]

Make sure you're connected with the Internet and linked icons with current fontawesome updated link.

[@wizminar]

I searched nav bar but emotional

[@radamesrodriguesneto4505]

Thanks amazing bro! Congratulations... Not just the content is relevant and artistically beautiful, but also the soundtrack is somehow uplifting and leave us with a good sensation sort of nostalgia! I'll spread this message for sure. Thanks once again!

[@CodingNepal]

You're welcome bro.. Stay tuned 😁

[@Italya3343]

Amazing brother ❤ 💙 🙌!!! Please continue with your videos and I promise you that I'll keep like your videosans more importantly I'll keep clicking on the Ads to support your Amazing work 👏👏 Really thank you!!!

[@CodingNepal]

Thank you so much.. I really appreciate it... Stay tuned 😁

[@vaibhavchaudhary3826]

Thanks for making video like this....and special thanks for making the things easy for my type of developer

[@CodingNepal]

It's my pleasure

[@vaibhavchaudhary3826]

@@CodingNepal how can i be in your touch ? Please explain col-sm-12 type of bootstrap

[@smootheraura]

Thank you for this! Easy tutorial, no talking, just watch and learn!

[@ycycyc-yc]

3.54 After typing the"fas fa-bars" why I still can't get the bar besides the checkbox when I run with the browser 😥

[@CodingNepal]

Make sure you've linked fontawesome in your html file and you're connected with the Internet.

[@ycycyc-yc]

@@CodingNepal I solve the problem, thank you so much! 🥰

[@ycycyc-yc]

@Mathias GEGOUT try to download the codes from the link, the css have an @import rule for the bar

[@gabrielguerreiromusic]

@CodingNepal I've linked it, add the import but it still don't work... what could it be?

[@AriGaelStudios]

@@gabrielguerreiromusic did you solve it?

[@beenarobi5180]

I cant stay alive without giving you a salute

[@CodingNepal]

Glad to hear that 😁

[@heiko3169]

Awesome trick with the checkbox to avoid using javascript at all. Nicely done!

[@CodingNepal]

Thank you 💙

[@ngoziawuri6411]

So easy to understand. Love everything about it. Keep it up ☺️

[@wtoggled4669]

This 7 min tutorial took me like 30 mins LOL

[@CodingNepal]

😁😁😁 Stay tuned.

[@mahendrasinghchandel5401]

How to make navbar close after click on 'About' and it will redirect to particular div and it should close if click outside of navbar ...Please help and reply 🙏🏻🙏🏻

[@CodingNepal]

You need JavaScript to close the navbar when we clicked outside of the navbar.

[@tractorspower189]

@Daniel Tibbotts Thank you

[@tractorspower189]

@@allroundersports1953 ?? Hhh

[@malaak1h]

@Daniel Tibbotts Nice 🤩👍🏻 to simplify the code: navUl.addEventListener("click", ()=> { check.checked = !check.checked ; });

[@nemes.tamas.21]

Or simply add to your HTML "head" section: function closeMenu() { var checkbox = document.getElementById('check'); checkbox.checked = false;} And add to every link in your navbar: onclick="closeMenu()" Example: Home Then, every time when a navbar item is selected, the menu will close.

[@carlosguzman3085]

subscribed my friend!

[@CodingNepal]

Thanks my friend 💙

[@foldings5679]

I'm a visual learner and these type of vids really helps! thank you sm

[@vishal_gadhave]

One of the best video found on KZbin.

[@CodingNepal]

Thank you 💙

[@bhaveshchadha9900]

At 6:29 what is the significance of '~ul' what does '~' exactly mean?

[@CodingNepal]

It's a general sibling selector: It selects only the first element if it follows the first element and both children are of the same parent element.

[@nishikysoftw7520]

Hey, great tutorial! I have a problem ... When I click the "burguer menu" button, the menu does not appear :((

[@CodingNepal]

Contact me on Instagram... Maybe you missed something on codes.

[@debrain1647]

Same thing here , i didn't miss any line of code , still having issues with the menu button ..do you think the fault is coming from the Editor ?

[@CodingNepal]

Check your codes with this tutorial codes - www.codingnepalweb.com/2020/04/responsive-menu-bar-in-html-css.html

[@PlayWithCode]

@@CodingNepal bro the site is under maintainence and I have also the same issue and i wrote the exact same code of yours. Please help

[@shriyanscreativestudios5603]

It is a nice responsive navbar

[@CodingNepal]

Thank you.. Stay tuned 😁

[@lorenzolonghi8697]

hands down the best tutorial about responsive navbar I have found, thank you

[@soumyadeepchatterjee2189]

Thanks for the video! Love from India!

[@CodingNepal]

Love from Nepal.

[@dilipkumar-ck1nc]

I got error while doing exactly at 2.12 minutes how many times iam doing this it is not getting about services and feedback not getting horizontal

[@CodingNepal]

Check code from description.

[@dilipkumar-ck1nc]

@@CodingNepal can u copy the link here I can't see

[@ZikoHendrix]

www.codingnepalweb.com/2020/04/responsive-menu-bar-in-html-css.html

[@bolivararguello3773]

Why is ul li not align with logo.? Is just a few px lower on mine.?

[@b3vad3d97]

Bruh, that's some primitive way to create a Navigation bar. Use flex don't use floats. It'll make your life easier. And also use javascript to open/close the menu and not checkboxes.

[@CodingNepal]

Yes i know please visit channel there are already many videos on navigation bar with css flexbox and javascript.

[@noonelikeme1024]

Hey, thank you for this tutorial! It's so helpful. But I have a small problem here. When I resize the page to the size after the max-width (768px and also after 925px), the Home, About, etc. buttons moved below the top banner (it went outside the blue box with the logo) and mixed up with the background. Is there any way to fix this? It'd be easier to explain with photos but sadly youtube doesn't have that option here :"

[@CodingNepal]

Decrease the padding of the navbar and the logo size inside media property.

[@nour3660]

@@CodingNepal i got a problem too, when i resized the page like you, it didn't appear, also the checkbox is there instead of the menu

[@goran-is6zr]

@@nour3660 same problem i have also

[@loekiouwerkerk2114]

@@goran-is6zr You probably need a different link for the fa fa bars

[@laper7284]

Se atentem a versão do fontawesome

[@siri8782]

Really appreciate your coding skills, so smoothly executed...

[@CodingNepal]

Thanks a lot!

[@aminanaseem3115]

Its great i mean u expllained it in a very short time...i usually dont comment but its really gr8..

[@vengalrao5772]

Bro please can you me your GitHub code..I am getting error

[@ginamonges7757]

Me encantó el diseño, intenté tres veces para que me salga y me salió

[@TheMasterPlayGame123]

The music choice is insanely annoying to follow these steps. I had to mute for better focus.

[@CodingNepal]

Okk.

[@oualidelbouni1185]

Believe it or not, this song makes me wanna work and focus

[@keanubock2083]

Hey Nepal .I could not get access for awesome fonts, so i used = . = really worked until i ran into #check:checked~ul{ left: 0; } and it stop working,Do you maybe know what went wrong ?

[@CodingNepal]

You may removed label and input tag... Please send your code on my Instagram.

[@stephentellez5718]

never thought that it could be so dificult, but the music make me want to do it again and again

[@ainsleyfrastructurekpopmashups]

You gained yourself my new subscriber!!! This is because I've learned how to code a website's navbar from this video. It is useful for me in the near future, because there might be school projects that require your coding skills, and creating my dedicated website for my YT channel, which I might utilize HTML-CSS skills. I've stuck trying to relocate the Navbar links inside the Navbar box until I've found your video Looking forward for a tutorial on how to add hover dropdown inside Navbar box.

[@SidBeyens]

me: doing the same and end with a list without any colour or in the right order... thinking about quitting with life Xd

[@aromus1c]

hahahahahahaha

[@aryanpanchal9248]

uses float in 2019... me: imma head out!

[@CodingNepal]

Here is a same video without used of float - kzbin.info/www/bejne/o5Onf6WsgLF0fa8

[@aryanpanchal9248]

@@CodingNepal thanks for the quick reply your work is highly appreciated by me you got a new sub

[@CodingNepal]

Thank you 💙😁

[@LaskarMultimedia172]

কিছু বুঝতে পারছিনা

[@yokubibnsafar7895]

Assalomu Aleykum. thank you for sharing knowledge)) I have a interview(I really need this)

[@CodingNepal]

Best of luck!

[@amazingvideos9368]

Bahut badhiya 🔥🔥🔥

[@aaronlin4344]

useless

[@thomosmuller4043]

I live in England this does really help love to Nepal ♥️

[@Webtricker]

This responsive navigation bar which is using HTML, CSS was very simple.Thanks for sharing.

[@tiago.developer]

Thanks for this video man, I couldn't understand how it worked and your video helped me a lot =)

[@CodingNepal]

Glad it helped!

[@alimohammadi1517]

Amazing content sir thank you

[@MindMeldJunction]

This is very useful and effective tutorial I have ever watched. Thank you so much for this.

[@extramaria1173]

Thank you so much!! I subscribing!

[@oqant0424]

THE MOST PRECISE AND AMAZING VIDEO! TO THE POINT✌

[@zandilesosiba9050]

Where have you been 🙄👌👌🔥🔥🔥🔥🙌🙌🙌❤️❤️❤️😂😂😂I love it

[@NEProb]

Yo vdo ta herdi herako thena ll 1 m pugexa ta ❤️❤️

[@CodingNepal]

Ajel coding sikdai xau ki.. Comment matrw ho 😂

[@The_Believer25]

Love You Bro.. Informative content

[@nitishdas1838]

I'm grateful fot this quick yet helpful video! Gotta deserve a subscribe!

[@CodingNepal]

Thank you 😁

[@ahmedmahfadi1631]

Millions of thanks for your helpful video 😊

[@CodingNepal]

You're welcome 💙

[@z-root8955]

building a responsive navbar with tears in my eyes :)