Hey everyone ✌. I am [Gautam Tiwari](https://linkedin.com/in/gautamtiwari003/), a front-end developer and... let's get started. > Tip: Follow along with me in this tutorial ## Why do we need a responsive menu? THE MAJORITY OF USERS USE MOBILE PHONES. Here are few facts to prove that: - Over one year, mobile users share increased by over 10%. - As of 2020, here is the global breakdown of internet traffic: **50.88% mobile**, 46.39% desktop, 2.74% tablet If that's not enough, you can check the global mobile traffic data below: ![Mobile usage graph. Mobile usage can be seen to increase](https://cdn.hashnode.com/res/hashnode/image/upload/v1624209159642/pAp4_ibLp.png) *Source: https://bit.ly/3xUVMhp* ## Final Result The main goal here is to help you out with the hamburger menu for the mobile version. Here's what we will be building in this tutorial: ![responsive hamburger menu demo on small screen size](https://cdn.hashnode.com/res/hashnode/image/upload/v1624346309808/VQJ3prPxG.gif) Did you notice the glass morphism effect on the menu? We will be doing that too! ## The Markup (with explanation) Let's set up the HTML for the nav and the menu. ```html ``` Just copy-paste this code (or type it if you an absolute beginner), as its explanation is given below. *Apologies for any semantical mistake and somewhat long class name.* Let's understand what we did and why we did it. - We have a nav element for our fixed navbar on top of our page. - The `

gautamtiwari

How to make a responsive hamburger menu using CSS only?

Join Our Newsletter. No Spam, Only the good stuff.