Discussion | CodeWithStephen

A dynamic navbar changes based on screen size, scroll position, active page section, or user interaction.

In this tutorial, you will build a responsive navbar with:

Desktop navigation links
Mobile hamburger menu
Smooth open/close animation
Active link highlighting
Scroll-based styling
Dropdown menu support

1. Project Structure

project-folder/
│
├── index.html
├── style.css
└── script.js

2. HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dynamic Navbar</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

<header class="navbar" id="navbar">
  <div class="nav-container">

    <a href="#" class="logo">MySite</a>

    <button class="menu-toggle" id="menuToggle">
      <span></span>
      <span></span>
      <span></span>
    </button>

    <nav class="nav-menu" id="navMenu">
      <a href="#home" class="nav-link active">Home</a>
      <a href="#about" class="nav-link">About</a>
      <a href="#services" class="nav-link">Services</a>
      <a href="#contact" class="nav-link">Contact</a>
    </nav>

  </div>
</header>

<script src="script.js"></script>
</body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  transition: 0.3s;
}

.navbar.scrolled {
  background: black;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.nav-menu {
  display: flex;
  gap: 20px;
}

.nav-link {
  text-decoration: none;
  color: black;
}

.menu-toggle {
  display: none;
}

const navbar = document.getElementById("navbar");
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");

menuToggle.addEventListener("click", () => {
  navMenu.classList.toggle("open");
});

window.addEventListener("scroll", () => {
  if (window.scrollY > 50) {
    navbar.classList.add("scrolled");
  } else {
    navbar.classList.remove("scrolled");
  }
});

Loading preview...

@media (max-width: 768px) {

  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .menu-toggle span {
    width: 25px;
    height: 3px;
    background: black;
  }

  .nav-menu {
    position: absolute;
    top: 70px;
    right: 20px;
    background: white;
    flex-direction: column;
    padding: 20px;
    display: none;
  }

  .nav-menu.open {
    display: flex;
  }
}

6. Features You Can Add

Sticky navbar
Auto-hide on scroll down
Search bar
User profile dropdown
Dark mode toggle
Animated underline
Mega menus
Scrollspy system
Dynamic API-loaded links

7. Final Notes

You now have a fully dynamic responsive navbar system using:

HTML
CSS
JavaScript

This structure is scalable for:

portfolios
SaaS websites
dashboards
blogs
admin panels
ecommerce stores

Happy coding.

Create a dynamic navbar

Dynamic Navbar System in HTML, CSS, and JavaScript

1. Project Structure

2. HTML Structure

5. Responsive Mobile Navbar

6. Features You Can Add

7. Final Notes

Was this post helpful?