A responsive navbar is one of the first things every web developer needs to get right. Your navigation menu is the first thing visitors interact with — if it breaks on mobile, the entire site feels broken.
In this tutorial, you will build a clean, functional responsive navbar from scratch using only HTML, CSS, Flexbox, and media queries. No JavaScript, no frameworks, no libraries.
By the end, you will have a navigation bar that displays links horizontally on desktop and stacks them vertically on mobile — ready to drop into any project.
What You Will Build
The final navbar will include:
- A logo on the left
- Navigation links on the right
- Hover effects on links
- A fully responsive layout that adapts to any screen size
On large screens, links appear in a horizontal row. On screens 768px and smaller, links stack vertically for easy thumb navigation.
Step 1: Create the HTML Structure
Start with the semantic HTML. Using a <nav> element is important — it tells browsers and screen readers that this is a navigation landmark, which improves accessibility and SEO.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="logo">DeveloperHint</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>A few things worth noting here. The <meta name="viewport"> tag in the <head> is not optional — without it, mobile browsers will zoom out and render your page at desktop width, making your media queries useless. The <ul> with list items is the correct semantic structure for navigation links, not a series of <div> tags.
Step 2: Style the Navbar with CSS and Flexbox
Now add the base styles. Flexboxis the perfect tool for navbars because it handles horizontal alignment, spacing, and vertical centering in just a few lines.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #111827;
padding: 15px 40px;
}
.logo {
color: white;
font-size: 24px;
font-weight: bold;
}
.nav-links {
display: flex;
list-style: none;
gap: 25px;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 16px;
transition: color 0.3s;
}
.nav-links a:hover {
color: #8b5cf6;
}Breaking down the key properties:
display: flexon.navbarplaces the logo and links side by sidejustify-content: space-betweenpushes the logo to the left and links to the right automaticallyalign-items: centervertically centers everything in the bar, regardless of height differencesgap: 25pxon.nav-linksspaces out the links cleanly without needing margin hackstransition: color 0.3sgives the hover effect a smooth fade instead of a harsh instant color change
At this point your navbar looks great on desktop. The next step is making it work on smaller screens.
Step 3: Add a Media Query for Mobile
Media queries let you apply different styles based on the screen width. Add this below your existing CSS:
@media (max-width: 768px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.nav-links {
flex-direction: column;
width: 100%;
margin-top: 15px;
gap: 15px;
}
}When the screen is 768px wide or smaller, two things happen. The navbar switches from a horizontal row to a vertical column using flex-direction: column, and the links stack on top of each other with align-items: flex-start so they sit flush to the left edge instead of centered.
768px is one of the most widely used breakpoints in responsive web design because it targets tablets and most landscape phones. You can adjust it to match your specific design if needed.
Complete Code
Here is the full HTML and CSS together, ready to copy and use.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="logo">DeveloperHint</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #111827;
padding: 15px 40px;
}
.logo {
color: white;
font-size: 24px;
font-weight: bold;
}
.nav-links {
display: flex;
list-style: none;
gap: 25px;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 16px;
transition: color 0.3s;
}
.nav-links a:hover {
color: #8b5cf6;
}
@media (max-width: 768px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.nav-links {
flex-direction: column;
width: 100%;
margin-top: 15px;
gap: 15px;
}
}Common Beginner Mistakes to Avoid
Forgetting the Viewport Meta Tag
This is the single most common reason responsive layouts fail on mobile. Without this line in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Mobile browsers will render the page at a fake desktop width and scale it down, bypassing your media queries entirely. Always include it.
Using Fixed Widths
Avoid setting fixed pixel widths like width: 1200px on layout containers. Fixed widths cause overflow and horizontal scrollbars on smaller screens. Use percentage-based widths, max-width, or let Flexbox handle the sizing instead.
Not Testing on Real Devices
Browser DevTools mobile simulation is useful, but it is not the same as testing on an actual phone. Touch targets, font rendering, and scroll behavior can all behave differently on real devices. Always test on at least one physical device before going live.
Where to Go Next
Once you are comfortable with this basic navbar, there are several natural next steps to explore:
- Hamburger menu: Hide the links on mobile behind a toggle button controlled with a small amount of JavaScript
- Dropdown menus: Add nested
<ul>elements with CSS hover states for multi-level navigation - Sticky navbar: Use
position: sticky; top: 0;to keep the navbar visible while scrolling - Smooth animations: Add CSS transitions to make the mobile menu open and close with a slide or fade effect
Each of these builds directly on what you just learned here — Flexbox and media queries are the foundation everything else sits on.
Final Thoughts
Building a responsive navbar with HTML and CSS is much more approachable than it used to be. Flexbox handles the horizontal layout cleanly, and a single media query is enough to make it mobile-friendly.
The process is straightforward: write semantic HTML, use Flexboxfor alignment, and add media queries for smaller screens. Once this pattern feels natural, you will find yourself applying it to headers, footers, card grids, and just about every other layout component you build.
Responsive design is not a feature you add at the end — it is a mindset you build into every component from the start.
Content Disclosure
This content was created with the assistance of AI tools and thoroughly reviewed, fact-checked, and refined by a human editor to ensure accuracy, clarity, and usefulness for readers.Advertisements
