Responsive Navbar using HTML CSS and JavaScript

Create a responsive navbar using HTMLCSS and JavaScript with a hamburger button and a closing button with dropdown effect.

Table of content:

–

–

–

Useful links

Create the responsive navbar using HTMLCSS and JavaScript

Let’s get started by creating a nav tag with a id of top-nav for future DOM manipulation using JavaScript and a class of navbar for future styling using CSS.

<nav id="top-nav" class="navbar">
      <div class="navbar-logo">
        <a href="#" class="navbar-brand">Norbert BM</a>
        <button class="navbar-toggler"><i class="fa-solid fa-bars"></i></button>
      </div>
      <div class="navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
          <li class="nav-item"><a href="#" class="nav-link">About</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
        </ul>
      </div>
    </nav>

The Header

Jut a coople of lines of code but still estetacly relevant is the header with its title and subtitle.

<div class="container">
      <header>
        <h1 class="title">Responsive Navbar</h1>
        <h4 class="stubtitle">using HTML CSS and JavaScript</h4>
      </header>
    </div>

Wrapped in a container class, this elements are easily styled using CSS.

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 30vh;
  text-align: center;
  color: #021837;
}
.title {
  font-size: 3.5rem;
}

General CSS reset

Getting writ of all unnecessary margins and padding by using the star sellector.

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
}
a {
  color: inherit;
}
body {
  font-family: "Roboto", sans-serif;
}

You should also take this opportunity and add a font family to the body element and a inherit value to all a tags.

Styling the navigation bar using CSS

The navigation bar is easily styled using the `navbar` class and all its subclasses like.

navbar-logo for some basic company info

navbar-toggler which will serve as a toggle button to toggle the class of showNavbar

.navbar {
  background-color: #1877f2;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  user-select: none;
}

.navbar-logo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 0.5rem;
}
.navbar-toggler {
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  border: none;
  transition: 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  border-radius: 0.3rem;
  margin-left: auto;
  /* Hide / Show navbar-toggle */
  display: none;
}
.navbar-toggler:hover {
  box-shadow: none;
  transition: 0.3s ease;
}
.navbar-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .navbar-toggler {
    display: block;
  }
  .navbar-nav {
    display: none;
  }
}
.navbar-nav .nav-item {
  margin-right: 1rem;
  opacity: 0.8;
  transition: 0.3s ease;
}
.navbar-nav .nav-item:hover {
  opacity: 1;
  transition: 0.3s ease;
}

.navbar-nav .nav-item.active {
  opacity: 1;
  transition: 0.3s ease;
}

.navbar.showNavbar {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.navbar-nav.showNavbar {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 15px;
  margin: 15px;
  width: 100%;
}

Listen to changes in the window with using JavaScript

By adding the event listener of “resize” to the window object you can track the inner width of the window and preform action accordingly.

In our case we will show or hide the “showNavbar” class and change the .navbar-toggler icon depending if the windowWidth > 768. As I munched in the video, feel free to change this value at any time even create multiple breakpoint

// Close nav auto

window.addEventListener("resize", function () {
  //   console.log(window.innerWidth)

  let windowWidth = window.innerWidth;
  if (windowWidth > 768) {
    navbarCollapse.classList.remove("showNavbar");
    navbarTop.classList.remove("showNavbar");
    if (navbarTogglerIcon.contains("fa-times")) {
      navbarTogglerIcon.remove("fa-times");
      navbarTogglerIcon.add("fa-bars");
    }
  }
});

Show hide the navigation using JavaScript

Get started by gettering all necessary elements from the DOM and assign them to variables accordingly.

Now add a event listener of click to the navbarToggler, this will toggle the “showNavbar” class on and off from the “navbarCollapse” class and the ‘navbarTop” class.

Furthermore, add and remove the corresponding icon by using its class from the navbarToggler. The classes are called using the Font Awesome CDN from the Font Awesome website.

const navbarTop = document.querySelector("#top-nav");
const navbarToggler = document.querySelector(".navbar-toggler");
const navbarCollapse = document.querySelector(".navbar-nav");



let navbarTogglerIcon = navbarToggler.querySelector("i").classList;

navbarToggler.addEventListener("click", function () {
  //   console.log("click");
  navbarCollapse.classList.toggle("showNavbar");
  navbarTop.classList.toggle("showNavbar");
  console.log(navbarTogglerIcon);
  if (navbarTogglerIcon.contains("fa-bars")) {
    navbarTogglerIcon.remove("fa-bars");
    navbarTogglerIcon.add("fa-times");
  } else {
    navbarTogglerIcon.remove("fa-times");
    navbarTogglerIcon.add("fa-bars");
  }
});

What the complete project on YouTube

For more detailed information about the responsive navbar html css js project, check out the complete video tutorial on my YouTube channel.

Want to become a web developer ?

Web Development Courses

Love Podcast about web development?

Podcast