# How to Create Responsive Navigation with Proper Event Handling in the DOM-Projects Repository

> Learn to build responsive navigation with event handling in the DOM-Projects repo. Use flexbox, media queries, and classList toggle for seamless mobile adaptation.

- Repository: [Jisan Mia/dom-projects](https://github.com/jisan-mia/dom-projects)
- Tags: tutorial
- Published: 2026-03-04

---

**To create responsive navigation in the DOM-Projects repository, implement a flex-based layout with CSS media queries for mobile adaptation and use `classList.toggle()` for event handling, following the pattern established in [`search-field-reveal/script.js`](https://github.com/jisan-mia/dom-projects/blob/main/search-field-reveal/script.js).**

The `jisan-mia/dom-projects` repository demonstrates a clean, lightweight approach to building navigation systems that adapt to different screen sizes without heavy dependencies. This guide walks through the actual implementation found in the source code, showing how to extend the existing static navigation into a fully responsive component with proper event handling.

## Understanding the Core Navigation Architecture

The repository's navigation system relies on a simple but effective three-layer architecture that separates concerns between markup, presentation, and behavior.

### HTML Structure in index.html

The navigation markup resides in **[`index.html`](https://github.com/jisan-mia/dom-projects/blob/main/index.html)** within a `<nav>` element that uses a flex container to align the brand logo and navigation links. The structure includes a brand section on the left and a `.nav-list` container holding the individual navigation items and GitHub link.

```html
<nav>
  <section>
    <a href="#" class="left-side">
      <div class="brand"><img src="./favicon/apple-touch-icon.png" /></div>
      <strong>DOM Projects</strong>
    </a>
    <div class="nav-list">
      <div class="nav-item"><a href="#projects" class="btn project-nav-link">Projects</a></div>
      <div class="nav-item">
        <a class="btn github-link" target="_blank" href="https://github.com/Jisan-mia/dom-projects">
          Github
        </a>
      </div>
    </div>
  </section>
</nav>

```

*Source:* [`index.html`](https://github.com/jisan-mia/dom-projects/blob/main/index.html) lines 68-82 define this structure, using semantic HTML5 elements and CSS classes for styling hooks.

### CSS Flex Layout and Media Queries

The styling in **[`style.css`](https://github.com/jisan-mia/dom-projects/blob/main/style.css)** implements a responsive layout using CSS Flexbox. The `nav section` acts as the primary flex container, horizontally distributing space between the brand and navigation list.

```css
/* From style.css lines 27-38 */
nav section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-list {
  display: flex;
  gap: 1rem;
  align-items: center;
}

```

For mobile adaptation, the repository already includes a media query that hides specific elements on small viewports. At `max-width: 400px`, the **Projects** link disappears to prevent overflow.

```css
/* From style.css lines 66-71 */
@media (max-width: 400px) {
  .project-nav-link {
    display: none;
  }
}

```

## Implementing Mobile Menu Toggle with Event Handling

To transform the static navigation into an interactive responsive navigation component, you need three additions: a toggle button, CSS visibility rules, and JavaScript event handling.

### Adding the Burger Button

Insert a `<button>` element inside the existing `nav section` to serve as the mobile menu trigger. This button should only appear on small screens and target the `.nav-list` container.

```html
<nav>
  <section>
    <a href="#" class="left-side">
      <div class="brand"><img src="./favicon/apple-touch-icon.png" /></div>
      <strong>DOM Projects</strong>
    </a>

    <!-- Mobile toggle button -->
    <button id="navToggle" class="nav-toggle" aria-label="Toggle menu">
      <i class="fas fa-bars"></i>
    </button>

    <div class="nav-list" id="navList">
      <div class="nav-item"><a href="#projects" class="btn project-nav-link">Projects</a></div>
      <div class="nav-item">
        <a class="btn github-link" target="_blank" href="https://github.com/Jisan-mia/dom-projects">
          Github
        </a>
      </div>
    </div>
  </section>
</nav>

```

### CSS for Mobile Responsiveness

Extend the existing media query to handle the toggle button visibility and menu positioning. The **`.active`** class controls the menu visibility state.

```css
/* Hide toggle on desktop */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Mobile-specific rules */
@media (max-width: 400px) {
  .nav-toggle {
    display: block;
  }

  .nav-list {
    display: none; /* Hidden by default */
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #ccc;
    padding: 1rem;
  }

  .nav-list.active {
    display: flex; /* Shown when toggled */
  }
}

```

### JavaScript Event Handling Pattern

The repository demonstrates a consistent event handling approach in **[`search-field-reveal/script.js`](https://github.com/jisan-mia/dom-projects/blob/main/search-field-reveal/script.js)** (lines 5-8), using `classList.toggle()` to manage UI state. Apply this same pattern to the navigation toggle.

```javascript
// projects/nav-toggle/script.js
document.addEventListener('DOMContentLoaded', () => {
  const toggleBtn = document.getElementById('navToggle');
  const navList = document.getElementById('navList');

  // Same pattern as search-field-reveal/script.js lines 5-8
  toggleBtn.addEventListener('click', () => {
    navList.classList.toggle('active');
  });
});

```

This approach keeps the DOM manipulation declarative by leveraging CSS classes rather than inline styles, making the code easier to maintain and debug.

## Complete Implementation Example

For testing or integration into the existing project structure, combine all components into a single demonstration file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Nav Demo</title>
  <link rel="stylesheet" href="../style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    /* Mobile enhancements */
    .nav-toggle {
      display: none;
      background: transparent;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
    }
    
    @media (max-width: 400px) {
      .nav-toggle { display: block; }
      .nav-list {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid #ccc;
      }
      .nav-list.active { display: flex; }
    }
  </style>
</head>
<body>
  <nav>
    <section>
      <a href="#" class="left-side">
        <div class="brand"><img src="../favicon/apple-touch-icon.png" /></div>
        <strong>DOM Projects</strong>
      </a>
      <button id="navToggle" class="nav-toggle" aria-label="Toggle menu">
        <i class="fas fa-bars"></i>
      </button>
      <div class="nav-list" id="navList">
        <div class="nav-item"><a href="#projects" class="btn project-nav-link">Projects</a></div>
        <div class="nav-item">
          <a class="btn github-link" target="_blank" href="https://github.com/Jisan-mia/dom-projects">Github</a>
        </div>
      </div>
    </section>
  </nav>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const toggleBtn = document.getElementById('navToggle');
      const navList = document.getElementById('navList');
      toggleBtn.addEventListener('click', () => navList.classList.toggle('active'));
    });
  </script>
</body>
</html>

```

## Summary

- **The DOM-Projects repository** uses a flex-based navigation system defined in [`index.html`](https://github.com/jisan-mia/dom-projects/blob/main/index.html) and styled in [`style.css`](https://github.com/jisan-mia/dom-projects/blob/main/style.css) with mobile-specific media queries at `max-width: 400px`.
- **Responsive navigation** requires extending the existing CSS to include a toggle button and absolute positioning for the mobile menu dropdown.
- **Event handling** follows the repository's established pattern in [`search-field-reveal/script.js`](https://github.com/jisan-mia/dom-projects/blob/main/search-field-reveal/script.js), using `classList.toggle('active')` to show and hide the navigation menu.
- **Progressive enhancement** ensures the navigation remains functional without JavaScript, while the toggle provides an optimized mobile experience when scripting is available.

## Frequently Asked Questions

### How does the DOM-Projects repository handle navigation responsiveness?

The repository implements a basic responsive layout using CSS Flexbox in [`style.css`](https://github.com/jisan-mia/dom-projects/blob/main/style.css) (lines 27-38) with a media query that hides the Projects link on screens narrower than 400px (lines 66-71). The navigation remains horizontally aligned on desktop but simplifies for mobile viewports through CSS-only adaptations.

### What is the recommended event handling pattern for mobile menu toggles?

According to the source code in [`search-field-reveal/script.js`](https://github.com/jisan-mia/dom-projects/blob/main/search-field-reveal/script.js) (lines 5-8), the repository favors using `element.classList.toggle('className')` inside a click event listener. This declarative approach separates state management from styling logic and maintains consistency across different interactive components.

### Where should I place the JavaScript for the navigation toggle?

Create a new file at [`projects/nav-toggle/script.js`](https://github.com/jisan-mia/dom-projects/blob/main/projects/nav-toggle/script.js) or add the script inline at the bottom of [`index.html`](https://github.com/jisan-mia/dom-projects/blob/main/index.html) before the closing `</body>` tag. The script should wait for the `DOMContentLoaded` event before attaching listeners to ensure the DOM elements exist.

### Does this approach work without JavaScript enabled?

Yes, the navigation remains functional as a static header because the core layout relies on CSS Flexbox rather than JavaScript positioning. Without JavaScript, the mobile toggle button simply won't appear (or can be hidden via CSS), and the desktop layout persists, ensuring graceful degradation.