Building a Responsive Navbar with HTML, CSS, and JavaScript

 Building a Responsive Navbar with HTML, CSS, and JavaScript

Navbar is an essential component of any website, and making it responsive is crucial for providing a great user experience across devices. In this tutorial, we will build a responsive navbar using HTML, CSS, and JavaScript.

Step 1: Setting up HTML structure

The first step is to create the HTML structure of the navbar. We will use an unordered list (ul) and list items (li) to create the navbar links.

php

<nav>

  <ul>

    <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>

</nav>

Step 2: Styling the Navbar with CSS

Next, we will add CSS styles to make the navbar look better. We will add a background color, font size, and padding to the navbar.

css

nav {

  background-color: #333;

}

nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: space-between;

}

nav ul li {

  margin: 0 10px;

}

nav ul li a {

  color: #fff;

  font-size: 18px;

  text-decoration: none;

  padding: 10px;

  transition: all 0.3s ease;

}

nav ul li a:hover {

  background-color: #555;

}

Step 3: Adding Responsive functionality with JavaScript

Finally, we will add JavaScript to make the navbar responsive. We will add a hamburger menu that will be displayed on small screens, and the navbar links will be hidden.

javascript

const hamburger = document.querySelector('.hamburger');

const navMenu = document.querySelector('nav ul');

hamburger.addEventListener('click', () => {

  hamburger.classList.toggle('active');

  navMenu.classList.toggle('active');

});

And that's it! With just a few lines of code, we have created a responsive navbar that works great on all devices.