Creating a responsive navbar with JavaScript and CSS

Creating a responsive navbar is an essential part of designing a website that looks and functions well on any device. A navigation bar that adjusts to different screen sizes can improve the user experience and make your website more accessible. In this article, we will show you how to create a responsive navbar with JavaScript and CSS in five easy steps.

Step 1: HTML Markup

The first step in creating a responsive navbar is to write the HTML markup. Here is an example of a basic navigation bar:

<nav class="navbar">
  <a class="logo" href="#">My Website</a>
  <div class="navbar-links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
  <a class="icon">
    <i class="fa fa-bars"></i>
  </a>
</nav>

In the code above, we have a nav element with a class of navbar. Inside the navbar, we have a logo link, a div with class navbar-links containing three navigation links, and an icon link with an icon from Font Awesome. We will use CSS and JavaScript to style and control the behavior of these elements.

Step 2: Basic Styling with CSS

Once we have written the HTML markup, we can move on to styling the navbar with CSS. Here is an example of some basic CSS to get started:

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

.navbar-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%;
}

.navbar-links a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
  font-size: 1.2rem;
}

.icon {
  display: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

In the code above, we have set the display to flex on the navbar to align the items. We have also set the background color, font size, and text color. The .navbar-links class sets the display to flex and sets the width to 60%, aligning the navigation links. The .navbar-links a class sets the text color, font size, and margin-right for the navigation links. The .icon class sets the display to none, the color to white, and the font size to 1.5rem for the icon link.

Step 3: Creating the Responsive Behavior with JavaScript

Now that we have the basic HTML markup and CSS styling for our navbar, we can move on to creating responsive behavior with JavaScript. We want the navigation links to collapse into a dropdown menu when the screen size is too small to display them all. Here is an example of the JavaScript code:

const icon = document.querySelector(".icon");
const navbarLinks = document.querySelector(".navbar-links");

icon.addEventListener("click", () => {
  navbarLinks.classList.toggle("show");
});

In the code above, we have selected the icon link and navbar-links div using the querySelector method. We have added an event listener to the icon link that toggles the show class on the navbar-links div when clicked. The show class is used to display the navigation links as a dropdown menu when the screen size is too small.

Step 4: Adding Media Queries for Responsive Design

To make our navbar truly responsive, we need to add media queries to adjust the styles for different screen sizes. Here is an example of the CSS code with media queries:

@media screen and (max-width: 768px) {
  .navbar-links {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 70px;
    left: 0;
    background-color: #333;
    padding: 10px;
    text-align: center;
  }

  .navbar-links a {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .icon {
    display: block;
    position: absolute;
    top: 20px;
    right: 10px;
  }
}

In the code above, we have added a media query that targets screen sizes with a maximum width of 768 pixels. When the screen size is smaller than 768 pixels, the .navbar-links class is set to display none and the flex-direction is set to column. We have also set the width to 100% and added position, top, left, and background-color properties to make the dropdown menu appear below the navbar when clicked. We have also set the .icon class to display block and added position, top, and right properties to position the icon link on the top right of the screen.

Step 5: Testing and Adjusting

Finally, we need to test our responsive navbar on different screen sizes and adjust the styles as needed. You may need to adjust the padding, font size, or other properties to make the navbar look and function well on all devices.

Conclusion

Creating a responsive navbar with JavaScript and CSS can improve the user experience and make your website more accessible. By following the five steps outlined in this article, you can create a responsive navbar that adjusts to different screen sizes and displays a dropdown menu when needed. Remember to test and adjust your styles to ensure that your navbar looks and functions well on all devices.