Responsive Navigation

I'll help you create a responsive navigation bar with a hamburger menu. Here's the complete solution: ## HTML Structure ```html Responsive Navigation ``` ## CSS Styling ```css /* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } /* Navigation styles */ .navbar { background-color: #333; padding: 1rem 0; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; } /* Logo styles */ .logo { color: white; font-size: 1.5rem; font-weight: bold; } /* Navigation links */ .nav-links { list-style: none; display: flex; gap: 2rem; } .nav-links li a { color: white; text-decoration: none; transition: color 0.3s ease; } .nav-links li a:hover { color: #ddd; } /* Hamburger menu button */ .hamburger { display: none; flex-direction: column; background: none; border: none; cursor: pointer; padding: 0.5rem; } .hamburger .bar { width: 25px; height: 3px; background-color: white; margin: 3px 0; transition: 0.3s; } /* Mobile styles */ @media screen and (max-width: 599px) { /* Show hamburger button */ .hamburger { display: flex; } /* Hide navigation links by default */ .nav-links { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: #333; flex-direction: column; padding: 1rem 0; gap: 0; } /* Show navigation links when active */ .nav-links.active { display: flex; } .nav-links li { width: 100%; text-align: center; padding: 0.5rem 0; } .nav-links li a { display: block; padding: 0.5rem; } /* Hamburger animation when active */ .hamburger.active .bar:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); } .hamburger.active .bar:nth-child(2) { opacity: 0; } .hamburger.active .bar:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); } } /* Desktop styles */ @media screen and (min-width: 600px) { /* Ensure nav links are visible */ .nav-links { display: flex !important; } } ``` ## JavaScript Behavior ```javascript // Wait for DOM to load document.addEventListener('DOMContentLoaded', function() { // Get elements const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); // Toggle menu when hamburger is clicked hamburger.addEventListener('click', function() { // Toggle active class on nav links navLinks.classList.toggle('active'); // Toggle active class on hamburger for animation hamburger.classList.toggle('active'); }); // Close menu when a link is clicked (optional but good UX) const links = document.querySelectorAll('.nav-links a'); links.forEach(link => { link.addEventListener('click', function() { navLinks.classList.remove('active'); hamburger.classList.remove('active'); }); }); // Close menu when clicking outside (optional but good UX) document.addEventListener('click', function(event) { const isClickInsideNav = hamburger.contains(event.target) || navLinks.contains(event.target); if (!isClickInsideNav && navLinks.classList.contains('active')) { navLinks.classList.remove('active'); hamburger.classList.remove('active'); } }); }); ``` ## Key Features: 1. **Responsive Design**: The navigation automatically switches between desktop and mobile layouts at 600px breakpoint. 2. **Hamburger Animation**: The hamburger icon transforms into an "X" when active. 3. **Smooth Transitions**: CSS transitions make the interactions feel smooth. 4. **Accessibility**: Includes proper ARIA label for the hamburger button. 5. **User Experience Enhancements**: - Menu closes when clicking a link - Menu closes when clicking outside - Proper hover states The navigation bar will display horizontally on screens 600px and wider, and collapse into a hamburger menu on screens smaller than 600px. Clicking the hamburger button toggles the visibility of the navigation links with a smooth animation.

Responsive Navbar with Hamburger Menu <600px

Conversation

Responsive Navbar with Hamburger Menu <600px

anthropic/claude-opus-4

Performance Traces

Traces

No span selected