How to Create Responsive Navigation Bar using HTML and CSS

How to Create Responsive Navigation Bar using HTML and CSS

In this video, I have shown you how to create a responsive navigation bar using html and css only

🗂️ Get Source Code of this Navigation Bar

🌐 Visit CodingNepal for helpful coding blogs

⭐ Hire me on Fiverr

📷 Follow me on Instagram

🤝 Support my work

Music used in this video - Cryptic Sorrow

[CodingNepal]

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

[guilhermexavier]

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

[Michael-lslu]

Handy tip for all you devs out there when making an unordered list in visual studio. Instead of copy-pasting the <li></li> 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.

[chrisvaughan]

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

[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!

[HoangNguyen-zvxb]

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!

[morriszin]

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

[r-chuck]

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.

[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🚀🚀

[jojiratuva]

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.

[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.

[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.

[karunakarkoyada]

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

[jagadish]

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

[MathinusG]

Thanks, been battling to find just this!!

[kondapuramsanjaykumar]

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

[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!

[pyromius]

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

[subratbehera]

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

[lorenzolonghi]

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