Channel: Thapa Technical

Category: Education

Tags: responsive menu bar

Description: 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: youtube.com/playlist?list=PLwGdqUZWnOp2jmYb2TQGYgBYp0xGwj9V1 ♥ Free Source Code & Discord Server Link: thapatechnical.com/2022/03/web-development-course-in-hindi-in-2022.html 😍 Check my Instagram to Connect with me: 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