Channel: Thapa Technical

Category: Education

Tags: responsive navigation bar tutorialsidebar menu using html & cssresponsive menunavigation bar in htmlresponsive navbar in html cssresponsive navbar html cssmenu html css javascriptresponsive navbarmenu bar in html and cssresponsive menu barresponsive navbar html css javascripthow to make responsive menu bar using cssnavbar in html cssresponsive navigation bar with html and cssnavbar cssmenu barnavigation barresponsive navgation bar css

Description: 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: hostinger.com/thapa7 **❤❤ ❤ For Thapa Family Use Special Discount Coupon: THAPA7 ❤❤ For More check the Website Link: thapatechnical.com/2022/03/create-responsive-navigation-bar-using.html ****************** BEST OFFER ON SERVER 👆***************** 👉 For Domain & Hosting Playlist: youtube.com/playlist?list=PLwGdqUZWnOp0ND1_EVCS-hClmA168Ky1L 👉 For Free Source code: thapatechnical.com/2022/03/create-responsive-navigation-bar-using.html 😍 Check my Instagram to Connect with me: 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