Responsive Navbar

📝 HTML

gregory_trujillo · Level 2 · 06/06/2026

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

kimberly_jackson 06/06/2026

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.

algo_smith 14/06/2026

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.