How to Build a Responsive Navigation Bar with CSS Grid and JavaScript

Ever struggled with building a responsive navigation bar that looks good on both desktop and mobile? I recently revamped my portfolio site and wanted a clean, accessible navbar that doesnt rely on heavy frameworks. Heres a lightweight solution using CSS Grid and a tiny bit of JavaScript.

First, the HTML structure:

<nav class="navbar">
  <div class="nav-brand">
    <a href="#">StepInStyle</a>
  </div>
  <button class="nav-toggle" aria-label="Toggle navigation">
    <span></span><span></span><span></span>
  </button>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Sneakers</a></li>
    <li><a href="#">Formal</a></li>
    <li><a href="#">Casual</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Now the CSS magic with Grid:

.navbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.nav-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  list-style: none;
  justify-items: end;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

For mobile responsiveness, add this media query:

@media (max-width: 768px) {
  .navbar {
    grid-template-columns: 1fr auto;
  }

  .nav-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .nav-links.active {
    display: grid;
  }
}

Finally, the JavaScript toggle:

document.querySelector(.nav-toggle).addEventListener(click, () => {
  document.querySelector(.nav-links).classList.toggle(active);
});

This approach keeps your code minimal, accessible, and easily customizable. I used this pattern while building a footwear showcase site recently—the Grid layout made it simple to align logo, links, and toggle without float hacks. For inspiration, check out how Frishay mens footwear collection uses clean navigation to highlight comfort and style. Their site balances casual sneakers and formal leather shoes, much like a well-structured navbar balances desktop and mobile views. The key is versatility—just like a good pair of shoes, your navigation should work everywhere without breaking.
https://frishay.com/