🔴 Create Responsive Navigation Bar using HTML CSS & JavaScript in 2022
Channel: Thapa Technical
Date: 2022-03-09

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

❤❤ ** Click Here For Server Link: http://www.hostinger.com/thapa7  **❤❤
❤ For Thapa Family Use Special Discount Coupon:   THAPA7   ❤❤

For More check the Website Link: https://www.thapatechnical.com/2022/03/create-responsive-navigation-bar-using.html


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


👉 For Domain & Hosting Playlist: https://youtube.com/playlist?list=PLwGdqUZWnOp0ND1_EVCS-hClmA168Ky1L

👉 For Free Source code: https://www.thapatechnical.com/2022/03/create-responsive-navigation-bar-using.html

😍 Check my Instagram to Connect with me:     https://www.instagram.com/thapatechnical

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