Responsive Navigation Tutorial

Learn how to create a navigation menu that adapts beautifully to different screen sizes, from desktops to mobile devices.

The Problem with Static Navigation

On smaller screens, a traditional horizontal navigation bar can become cramped, with links overlapping or becoming unreadable. This leads to a poor user experience.

/* Example of what happens without responsiveness */ /* .nav-links { width: auto; } */

The Solution: Responsive Design

We'll use CSS media queries to change the navigation's layout and behavior based on the screen width. For smaller screens, we'll transform the horizontal bar into a collapsible "hamburger" menu.

Step 1: Basic HTML Structure

Here's the fundamental HTML for our navigation:

<header>
<div class="container">
<nav>
<a href="#" class="logo">Awesome Nav</a>
<div class="menu-toggle">☰</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>

Step 2: Core CSS Styling

Initial styling for layout and appearance:

:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-color: #f8f9fa;
--text-color: #333;
--nav-hover-color: #e9ecef;
--breakpoint-md: 768px;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.6;
}

header {
background-color: var(--primary-color);
color: white;
padding: 1rem 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.logo {
font-size: 1.8rem;
font-weight: bold;
text-decoration: none;
color: white;
}

.nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}

.nav-links li {
margin-left: 1.5rem;
}

.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 0.8rem;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.nav-links a:hover,
.nav-links a:focus {
background-color: var(--nav-hover-color);
color: var(--primary-color);
}

.menu-toggle {
display: none;
cursor: pointer;
font-size: 1.8rem;
color: white;
}

Step 3: Responsive CSS with Media Queries

This is where the magic happens. We target screens smaller than 768px (our breakpoint) and adjust the navigation:

@media (max-width: var(--breakpoint-md)) {
.nav-links {
width: 100%;
flex-direction: column;
text-align: center;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: var(--primary-color);
padding-top: 1rem;
}

.nav-links.active {
max-height: 300px; /* Adjust as needed */
}

.nav-links li {
margin: 0.5rem 0;
}

.menu-toggle {
display: block;
}
}

Step 4: JavaScript for Toggle Functionality

We need JavaScript to toggle the `.active` class on the `.nav-links` when the menu icon is clicked.

document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');

menuToggle.addEventListener('click', function() {
navLinks.classList.toggle('active');
});
});

Putting It All Together

Combine the HTML, CSS, and JavaScript above to create a fully functional and responsive navigation menu.

Experiment by resizing your browser window to see the navigation adapt!