How to Create a Responsive Navigation Menu Using HTML, CSS, and JavaScript (with an output show below)

3 min readSep 6, 2024

Creating a responsive navigation menu is a crucial part of modern web design. A well-designed menu ensures that users can easily navigate your website, whether they’re on a desktop, tablet, or mobile device. In this article, I’ll guide you through building a simple responsive navigation menu using HTML, CSS, and a touch of JavaScript.

1. HTML Structure

Let’s start by setting up a basic HTML structure for our navigation menu. We’ll create a simple menu with links and a “hamburger” icon that will appear on smaller screens.

HTML:

<nav class="navbar">
  <div class="logo">
    <a href="#">Logo</a>
  </div>
  <ul class="nav-links">
    <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="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
</nav>

The nav-links list contains the navigation items.
The hamburger div holds the three lines that represent the icon for mobile navigation.

2. CSS Styling

Next, we’ll style the navigation bar. The key part is making it responsive so that the menu appears as a traditional navbar on larger screens and collapses into a hamburger menu on smaller screens.

CSS:

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

body {
  font-family: Arial, sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 15px;
}

.navbar .logo a {
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
}

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

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 4px;
  transition: 0.3s;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    background-color: #333;
    padding: 20px;
  }

  .nav-links li {
    text-align: center;
    margin: 10px 0;
  }

  .hamburger {
    display: flex;
  }

  .nav-links.active {
    display: flex;
  }

}

The @media query ensures that the layout adjusts when the screen width is below 768px.
The hamburger menu becomes visible on smaller screens and hides the nav-links by default. When the user clicks the hamburger icon, the menu will slide down.

3. JavaScript for Toggle Effect

Finally, we’ll add a simple JavaScript function to toggle the menu when the hamburger icon is clicked.

JavaScript:

const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {
  navLinks.classList.toggle('active');
});

This script listens for clicks on the hamburger icon and toggles the active class on the nav-links to show or hide the menu.

4. Final Thoughts

You’ve just created a responsive navigation menu! The combination of HTML, CSS, and JavaScript allows you to create a functional and mobile-friendly navigation system that enhances user experience. This basic implementation can be expanded with animations, transitions, or dropdown menus, depending on your needs.

Here’s the full code for you to try:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Include the CSS code provided above */
  </style>
  <title>Responsive Navigation Menu</title>
</head>
<body>
  <nav class="navbar">
    <div class="logo">
      <a href="#">Logo</a>
    </div>
    <ul class="nav-links">
      <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="hamburger">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </nav>
<script>
    // Include the JavaScript code provided above
  </script>
</body>
</html>

Output:

Conclusion

Responsive navigation menus are essential for providing a seamless experience across all devices. With just a few lines of code, you can ensure that your website’s navigation is both user-friendly and stylish. Whether you’re working on a simple portfolio or a large-scale web application, mastering responsive menus is a valuable skill to have.

Thank you for reading! If you found this post helpful and would like to support me in my web development journey, consider visiting my Ko-fi page. Your support means a lot and helps me create more content!

Happy Coding! 👋