The 3 Ingredients of a Responsive Navbar

Creating a responsive navbar with a hamburger menu might seem complex, but it breaks down into three simple parts:

1. HTML Structure

We use a semantic <nav> tag. Inside, we group our elements: a logo (usually a div or a tag), a list of links (ul), and a “hamburger” button (three lines) that we only show on mobile screens.

2. CSS Flexbox & Media Queries

Flexbox makes aligning items horizontally easy. On Desktop:

• display: flex; justify-content: space-between; puts the logo on the left and links on the right.
• We hide the hamburger icon with display: none;.

Media Queries (@media (max-width: 768px)) allow us to change the layout for phones:

• We show the hamburger icon.
• We change the link container to flex-direction: column and position it absolutely (or just push it down) so it stacks vertically.
• We initially hide the links using display: none or setting height to 0.

3. JavaScript Toggle

We need a tiny bit of JavaScript to make the button work. We add a “click” event listener to the hamburger button. When clicked, we toggle a class name (like .active) on the nav-menu.

The CSS handles the rest: .nav-menu.active { display: flex; } makes the menu appear when that class is added.