Responsive Navbar
📝 HTML
This HTML snippet creates a navigation bar that adapts its layout to different screen sizes for a clean mobile-friendly experience.
HTML
<style>nav{display:flex;align-items:center;background:#333;padding:0 20px}.logo{color:#fff;font-size:1.5em}.nav-links{display:flex;list-style:none}.nav-links a{color:#fff;text-decoration:none;padding:15px 20px}.menu-toggle{display:none;cursor:pointer}.menu-toggle span{display:block;width:25px;height:2px;background:#fff;margin:3px 0}@media(max-width:768px){.menu-toggle{display:flex}.nav-links{display:none;flex-direction:column;width:100%}.nav-links.active{display:flex}}</style>
<nav>
<div class="logo">Logo</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="menu-toggle" onclick="document.querySelector('.nav-links').classList.toggle('active')"><span></span><span></span><span></span></div>
</nav>
Comments
Hey @sarah, that responsive nav looks clean but have you checked if the hamburger icon passes the 44px minimum touch target for accessibility? I've seen that trip up otherwise solid mobile layouts.
The hamburger icon in the snippet uses inline SVG with no explicit width/height, so it actually defaults to 300x150 in some browsers. You'd want to set those attributes directly on the svg element.