The Menu That Wouldn’t

It Never Responds

Every great glow-up starts with a “before” picture — and wow, this one is rough.
This chapter introduces the classic desktop-only nav that absolutely refuses to play nice on smaller screens.

---

😬 What’s Wrong With This Thing?

This menu:

• uses a fixed desktop width like it’s 2008
• forces every link into one long horizontal line
• won’t wrap, shrink, collapse, or compromise
• looks fine on a big monitor but falls apart instantly on mobile

Perfect. Time to expose the flaws so the glow-up can begin.

---

🧱 Baseline HTML

All nav variations in this module build on the same shared structure.
Here’s the pure “pre-responsive” version:

<header class="site-header">
  <div class="brand-lockup">
    <span class="site-logo">⚡</span>
    <span class="site-title">WebDevTnT</span>
  </div>

  <nav class="site-nav">
    <ul class="nav-list">
      <li><a href="#">Overview</a></li>
      <li><a href="#">Lessons</a></li>
      <li><a href="#">Demos</a></li>
      <li><a href="#">Assignments</a></li>
      <li><a href="#">Resources</a></li>
    </ul>
  </nav>
</header>

Yep — no hamburger, no toggle, no mercy.

---

💄 The Offending CSS

Desktop-locked and proud of it:

.site-header {
  width: 960px;
  margin: 2rem auto;
  padding: 1rem 1.5rem;
  background: #020617;
  color: #e5e7eb;
  border-radius: 999px;
}

.nav-list {
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
  white-space: nowrap; /* refuses to wrap */
}

On small screens?

➡️ Links wander off-screen.
➡️ Horizontal scrolling becomes your new awkward companion.

---

🧪 Live Mini Demo: “Try Resizing Me”

This tiny demo looks sleek… until it doesn’t.
Give it a squeeze and watch the chaos unfold.

⚡

WebDevTnT

• Overview
• Lessons
• Demos
• Assignments
• Resources

Shrink the window — this menu refuses to chill. Links slide off-screen, but nothing wraps.

---

🍱 Takeout Notes

Pack these in your developer bento box:

• Fixed widths age faster than dairy in the sun.
• “White-space: nowrap” is a sworn enemy of mobile layouts.
• Horizontal scrolling is a big red flag.
• This broken baseline is perfect — every future improvement will feel magical.

---

Next Up

02 · Flex to Impress
Same HTML. Better attitude.
A flexbox layout that actually respects the viewport.