🔴 Create Responsive Navigation Bar using HTML CSS & JavaScript in 2022

Welcome, In this video, we will see how to create a responsive animated navigation bar using HTML, CSS & JavaScript in Hindi.

What exactly we are going to do to make a complete responsive Menu bar using HTML CSS & JavaScript 👇

📄 How to create a header with logo and nav element
📄 How to give proper class to all the HTML elements
📄 How to style header for the desktop version
📄 How to add Mobile Navbar Icon Button
📄 How to Hide the Mobile Icon in the desktop version
📄 How to unhide the Mobile Icons & Hide the original navbar when we are below 980px width.
📄 How to change the look of Navbar for Mobile version with animation
📄 How to add Active class on the header using JavaScript and also how to toggle between the close & Open Menu Icon depending on click

****************** BEST OFFER ON SERVER *****************

Guy's If you are thinking of buying a server(Web Hosting) then this is the best time because I have a special offer for you ❤

If you buy through the link given below, then you will get 😍

Minimum 70% to 90% Discount(Depends on Plan) + 7% Extra Special Coupon Code + 200rs Cashback after 1Month

I know you love the Offer right It's better than the Black Friday Sale ✌ Only for Thapa Technical Family 👇.

❤ For Thapa Family Use Special Discount Coupon: THAPA7 ❤❤

****************** BEST OFFER ON SERVER 👆*****************

-------------- Timeline -------------

0:00 Menu Preview
3:10 hostinger
4:05 Folder Structure
5:15 todo App for Project
6:00 Header with logo and nav element
8:40 Other Section HTML Code
9:30 How to Comment
9:50 Add CSS file to the main file
10:30 style header for desktop version
17:50 Other Section CSS Style
18:35 Adding Mobile Navbar Icon
21:10 Style the Mobile nav icon
22:50 Hide Mobile Icon in desktop ver.
23:00 Hiding the Close Icon
24:00 Responsive Code for Menu
27:00 Hide the Navbar in Mobile ver.
28:00 Changing Navbar Style for Mobile
35:00 Add Active class on header.
39:00 Toggle close & Open Menu Icon on click
43:00 Checking Menu Responsiveness
43:25 Host Menu on Server

[ThapaTechnical]

BEST OFFER ON SERVER

Guy's If you are thinking of buying a server(Web Hosting) then this is the best time because bcz HOLI SALE IS LIVE & I have a special Coupon Code for you ❤

If you buy through the link given below, then you will get 😍

Minimum 70% to 90% Discount(Depends on Plan) + 7% Extra Special Coupon Code + 200rs Cashback after 1Month

I know you love the Offer right It's better than the Black Friday Sale ✌ Only for Thapa Technical Family 👇.

❤ For Thapa Family Use Special Discount Coupon: THAPA7 ❤❤



BEST OFFER ON SERVER

[Anonymous-vudn]

Thapa technical, code with Harry, apna college best to learn code from this channels

[anonymus__]

43:10 is what true love looks like...❤

I was stuck in this button click navigation menu for 2 days I was totally getting frustrated and felt like quitting it i watched many videos maybe more than 10 to 15 but you saved me.

[vinaypatil]

Awesome channel
Awesome content
Awesome explanation
Awesome teacher

Best Web Dev channel in Hindi Language

[StrikingCommoner]

You're true symbol of best online education. God bless you

[harsh_govind]

Thank you. You solved my problem. Looking forward to learn more.

[manikantmani]

Without coding background, I have learned 90% of web development from Thapa Sir and Currently, I got an internship as a front-end react developer. Thank you so much thapa sir. Love from Bihar(Samastipur).

[tqaquotes]

Excellent.
A complete tutorial.
Helpful. 👍

[foodmoodaventurecooking]

"YouTube: life Changer"
"Tiktok: Gender changer"

"Thapa Technical : Mind changer"❤️❤️

[saykathbiswas]

great sir. I follow your videos. you are doing great job. make some CSS stylish menu.

[sidgaming]

39:46 ohhh my god 😂😂😂

btw nice video bhai 👌

[samriddhabajpai]

Bro, i have one problem.
How can i get the Indian cities and states details by putting the value of pincode in React JS?
please guide me on the same.

[peaceenlightenment]

Can we have a series like you are building a college website with some basic applications like realtime messaging and
We would love to learn how to actually deal with clients for such project. Going from all the way of designing to deployment.

[sandeepkumar-eoed]

Bhai ek blog website banao PHP with admin panel fully dynamically tag, category and post .

[sripathisri]

bro navbar-link:visitied styles are not applying
display in line block, text deceration none these styles are not applying means not taking styles in html

[AkramKhan-ezlr]

please reply witch themes and font style you use in this video.

[harivishvakarma]

sir please make video on MEAN too.. if that's possible to you!!

[manishkaushik]

i'm adding project section but scrolling is not working what i do ?

[RakeshKumar-elgd]

Bhaiya, awesome video
bhaiya css variables pe video bnado

[muhammadumer]

Bro can you please make a complete tutorial on how to make a ptc website using html css and JavaScript please bro