Create a RESPONSIVE NAVBAR with sidebar animation (CSS ONLY)

Video Description

👉 Get the best web hosting to deploy your website: https://www.hostinger.com/coding2go ✌️ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more BEGINNERS START HERE: 👌 Learn HTML5 in one afternoon with our beginner course: https://www.udemy.com/course/coding2go-html5-crashcourse/?referralCode=F017D565D3D3BE47B8BC In this video we are going to create a responsive navbar that has an animated sidebar. I am going to explain everything you need to create a responsive navigation bar with a hamburger menu and a sidebar that has a slide in and slide out animation transition. We are going to use HTML, CSS (Flexbox). This is a CSS only solution that does not require any JavaScript (no js). You will learn basic how to use CSS Flexbox to align your navbar horizontally and vertically (as a sidebar). Source code for the navbar on our website: 👉 https://www.coding2go.com Menu Icon and Close icon: 👉 https://fonts.google.com/icons #responsive #navbar #javascript #webdevelopment CONCEPTS YOU WILL LEARN: ✔ HTML, CSS only ✔ Responsive Web design ✔ Flexbox Layouts ✔ Media Queries ✔ Google Icons (Hamburger Menu, Close Button) ABOUT THE NAVBAR: The basic Navbar is created in HTML and CSS To make it behave differently depending on the size of the device that the website is being displayed on, we have to make it responsive. In the mobile view most of the links are hidden and accessable by clicking on a menu button (hamburger menu icon). It will expand a sidebar that uses CSS Flexbox to align the navigation links vertically. The sidebar has a slide in and slide out transition. To open and close the sidebar, we use google icons menu and close X. Using simple HTML and CSS Code we can realize this project without javascript using a simple checkbox and its pseudo-class :checked to check if the sidebar should open or not. LICENSE FOR BACKGROUND MUSIC Track: "Little Things" Music provided by https://Slip.stream Free Download/Stream: https://get.slip.stream/QmMj1I Track: "One More Night" Música fornecida por https://Slip.stream Download grátis/Stream: https://get.slip.stream/8j1Eo5 Track: "Tropical Nights", Nico Sainato Tracks Music provided by https://Slip.stream Free Download/Stream: https://get.slip.stream/Hk8DVL Listen on Spotify: https://go-stream.link/sp-nico-sainato-tracks Track: "South Africa", Nico Sainato Tracks Music provided by https://Slip.stream Free Download/Stream: https://get.slip.stream/WFuB3L Listen on Spotify: https://go-stream.link/sp-nico-sainato-tracks like and subscribe if you read this 👍