Muhammad Rezki Dwijayanto

☰

Tutorial: Creating a Beautiful Responsive Navbar with HTML, CSS, and JavaScript



Navigation bars (navbars) are one of the most important components in web design. They help users move easily through your website. In this tutorial, we’ll create a simple yet beautiful responsive navbar using HTML, CSS, and JavaScript.

Step 1: Create the HTML Structure

We’ll start by creating a basic HTML file with a navbar section.

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

  <nav class="navbar">
    <div class="logo">MyWebsite</div>
    <ul class="nav-links" id="navLinks">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div class="menu-icon" id="menuIcon">
      ☰
    </div>
  </nav>

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

Explanation:

  • .logo → Website name or logo.

  • .nav-links → Contains navigation items.

  • .menu-icon → Hamburger icon for smaller screens (mobile).

Step 2: Style the Navbar with CSS

Now, let’s make it beautiful. Create a style.css file.

/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
}

/* Navbar styling */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10%;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-links li a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: 0.3s ease;
}

.nav-links li a:hover {
  color: #222;
  background: white;
  padding: 5px 10px;
  border-radius: 5px;
}

/* Menu icon for mobile */
.menu-icon {
  display: none;
  font-size: 2rem;
  cursor: pointer;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 70px;
    right: -200px;
    background: #4facfe;
    width: 180px;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    transition: right 0.3s ease;
  }

  .nav-links.active {
    right: 10px;
  }

  .menu-icon {
    display: block;
  }
}

Key styling points:

  • We used a gradient background for a modern look.

  • Navigation links change color on hover.

  • On mobile, the links slide in from the right.

Step 3: Add JavaScript for Interactivity

Now let’s make the hamburger menu toggle on small screens. Create a script.js file.

const menuIcon = document.getElementById("menuIcon");
const navLinks = document.getElementById("navLinks");

menuIcon.addEventListener("click", () => {
  navLinks.classList.toggle("active");
});

Explanation:

  • When you click the hamburger menu (menuIcon), we toggle the active class on .nav-links.

  • This makes the mobile menu slide in and out.

Step 4: Test and Customize

Open your HTML file in a browser. Resize the window:

  • On desktop → You’ll see a horizontal navbar.

  • On mobile → The hamburger icon appears, and clicking it shows the sliding menu.

You can customize:

  • Colors (gradient background).

  • Fonts.

  • Animations (e.g., smooth sliding or fade).

✅ Congratulations! You’ve built a responsive and beautiful navbar with HTML, CSS, and JavaScript.