Website Development in Hindi #23:  Create Responsive Animated Navbar
Channel: Thapa Technical
Date: 2022-04-13

Welcome guys, Today in this video  we are going to deal with responsive navbar.

What is responsive navbar?
By responsive menus, we mean quite simply navigation menus whose presentation or behavior is altered on different devices and screen widths. There are various approaches to achieving this, whether by using CSS or other languages.
We are going to achieve it by using css.

First of all we will add two icons and hide them, Then using media queries we will make it responsive. After then we will style the icon and navbar. And we will give animation effects to the navbar.
Now, using javascript we will only show the menu whenever user click the toggle icon.


👉 Website Development Course Playlist: https://youtube.com/playlist?list=PLwGdqUZWnOp2jmYb2TQGYgBYp0xGwj9V1

♥ Free Source Code & Discord Server Link: https://www.thapatechnical.com/2022/03/web-development-course-in-hindi-in-2022.html

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


00:00 Introduction 
00:13 What is responsive navbar? 
01:04 Adding two icons 
02:43 Hiding the icons 
03:53 using media queries 
 06:14 displaying only one icon
07:39 Styling the icon
08:25 Styling the navbar 
11:52 Animating the navbar 
14:00 Using active class 
15:28 Using JS
20:25 Conclusion 
20:50 Outro