How to Make a Responsive Navbar in CSS: A Step-by-Step Guide
Building a responsive navbar is essential for any modern website. It ensures your navigation links look great and work smoothly on both desktop and mobile. In this tutorial, I’ll show you how to build one using only HTML and CSS, featuring a mobile hamburger menu.
We’ll use Flexbox for layout and CSS media queries to adapt the menu to different screen sizes. The best part? No JavaScript needed—just a clever CSS checkbox trick.
1. HTML Structure
Use a <nav> element for better accessibility. Inside it, add a logo link and an unordered list for your navigation links. Wrap everything in a container so you can position them with ease:
- Logo: a simple anchor tag
- Links: an unordered list with anchor tags
2. Flexbox Styling
Set your nav container to display: flex; justify-content: space-between; align-items: center;. This places your logo on the left and the links on the right in a single row. Add flex-wrap: wrap to handle narrow widths gracefully.
3. Making It Responsive
Add a media query at 768px. On smaller screens, hide the menu list and show a hamburger icon instead. Use a hidden checkbox input styled as a hamburger; when it’s checked, the menu expands vertically. This pure CSS approach is fast and performant.
4. Conclusion
With just a few lines of CSS, you have a fully responsive navbar. Resize your browser to test it, or use browser DevTools for mobile views. Now you can improve it further by adding dropdowns or active link states. Happy coding!
