Sidebar to Mobile Nav Tutorial

A Understanding the Pattern

Goal: Understand how desktop sidebars transform for mobile devices.

📋 The Pattern:

You've already built a beautiful desktop sidebar layout in the previous lesson using Flexbox. But what happens when someone views it on a phone?

A fixed sidebar works great on desktop where horizontal space is abundant. On mobile devices, however, that sidebar would consume 300px of precious screen space—leaving barely any room for content!

The solution? Transform it into an off-canvas menu that slides in when needed.

🎯 What We'll Build:

• Desktop (>768px): Sidebar visible on the left (what you have now)
• Mobile (≤768px): Sidebar slides off-screen, hamburger menu appears at top
• Click hamburger: Sidebar slides in from the left
• Click × or link: Sidebar slides back out

B Add Checkbox Hack HTML

Goal: Add the HTML elements needed for the mobile menu (checkbox, mobile header, hamburger icon).

💡 The "Checkbox Hack"

We're going to use a clever CSS technique called the "checkbox hack" to control the menu without JavaScript. A hidden checkbox will track whether the menu is open or closed, and CSS will react to its :checked state.

📝 Step 1: Add the checkbox

Add this right at the start of your <main class="container"> element, before the sidebar:

<!-- Hidden checkbox for menu toggle -->
<input type="checkbox" id="sidebar-toggle" class="sidebar-toggle">

📝 Step 2: Add close button to sidebar

Inside your <nav class="sidebar">, add a close button at the top (after the <h2>):

<label for="sidebar-toggle" class="close-btn">×</label>

📝 Step 3: Add mobile header

Add this right after your </nav> (sidebar) closing tag, but before <div class="content">:

<!-- Mobile header (hidden on desktop) -->
<div class="mobile-header">
  <label for="sidebar-toggle" class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </label>
  <h1>Responsive Web Design</h1>
</div>

📝 Step 4: Hide mobile header on desktop

Right now the mobile header is showing on desktop - let's hide it! We'll reveal it later when we add our mobile media query.

/* Hide mobile header on desktop (we'll show it in our media query later) */
.mobile-header {
  display: none;
}

C Add Images (Not Responsive Yet!)

Goal: Add images to your content and discover why fixed widths break responsive layouts.

📷 Step 1: Add images to your sections

Let's add images to make your content more visual. Add an <img> tag at the top of 2-3 of your sections (right after the <h2>).

Copy and paste these into your sections:

<!-- In #intro section (right after <h2>Introduction...</h2>) -->
<img src="https://placehold.co/800x400/667eea/white?text=Responsive+Design"
     alt="Responsive Design Concept">

<!-- In #principles section (right after <h2>Core Principles</h2>) -->
<img src="https://placehold.co/800x400/764ba2/white?text=Core+Principles"
     alt="Core Principles">

<!-- In #layouts section (right after <h2>Flexible Layouts</h2>) -->
<img src="https://placehold.co/800x400/3498db/white?text=Flexible+Layouts"
     alt="Flexible Layouts">

🎨 Step 2: Set fixed width in CSS

Add this CSS to style your images with a fixed width:

/* Images - fixed width (NOT responsive yet!) */
.content img {
  width: 800px;
  height: auto;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

🔍 Step 3: Test the problem!

Now resize your browser window to mobile size (~400px width).

D Make Images Responsive

Goal: Fix the image overflow problem by making images scale proportionally to their container.

✨ The Solution: max-width

The fix is surprisingly simple! Replace width: 800px with max-width: 100%.

🎨 Update your CSS:

Change your image CSS from the fixed width to this:

/* Images - NOW RESPONSIVE! */
.content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

🔍 Test it!

Resize your browser window again. Your images should now scale smoothly! They never overflow their container, and they maintain their aspect ratio.

E Style Mobile Header & Hamburger

Goal: Style the mobile header and hamburger icon (they'll be hidden on desktop, visible on mobile).

📱 Step 1: Hide checkbox

First, hide the checkbox—it's purely functional. Add this to your CSS:

/* Hide checkbox (it's just for state tracking) */
.sidebar-toggle {
  display: none;
}

📱 Step 2: Hide close button (for now)

On desktop, we don't need the close button. Add this to your CSS:

/* Hide close button on desktop (show later on mobile) */
.close-btn {
  display: none;
}

📱 Step 3: Style mobile header

Style the mobile header (it's already hidden from Part B). Add this to your CSS:

/* Style mobile header (already hidden, will show in media query) */
.mobile-header {
  background: #2c3e50;
  color: white;
  padding: 1rem 1.5rem;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 999;
}

.mobile-header h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

🍔 Step 4: Create hamburger icon

Style the three-line hamburger menu icon. Add this to your CSS:

/* Hamburger icon (three lines) */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s ease;
}

F Media Query for Mobile Layout

Goal: Use a media query to transform the layout on screens 768px and below.

📱 The Media Query

Now we'll add a media query that changes everything at 768px and below. All the following steps go inside this:

@media (max-width: 768px) {
  /* Steps go here */
}

🎨 Step 1: Show mobile header

Inside your @media (max-width: 768px) query, add this code to reveal the mobile header:

/* Show mobile header on small screens */
.mobile-header {
  display: flex;
}

🎨 Step 2: Stack layout vertically

Change the container from horizontal to vertical layout. Add this inside your media query:

/* Stack layout vertically on mobile */
.container {
  flex-direction: column;
}

🎨 Step 3: Transform sidebar off-canvas

This is where the magic happens! We'll use CSS transforms to slide the sidebar off-screen. Add this inside your media query:

/* Hide sidebar off-screen on mobile */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 280px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;
}

🎨 Step 4: Show close button

Now reveal the close button (×) inside the mobile sidebar. Add this inside your media query:

/* Show close button in mobile sidebar */
.close-btn {
  display: block;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
  line-height: 1;
}

✨ Step 5: The magic - slide in when checked!

This is THE key moment! When the checkbox is checked (by clicking hamburger or close button), slide the sidebar back in. Add this inside your media query:

/* When checkbox is checked, slide sidebar in */
.sidebar-toggle:checked ~ .sidebar {
  transform: translateX(0);
}

/* Add dark overlay behind sidebar */
.sidebar-toggle:checked ~ .sidebar::before {
  content: '';
  position: fixed;
  top: 0;
  left: 280px;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: -1;
}