Simple Responsive Navigation Bar

Creating a responsive navigation bar is an important part of building a modern website. A responsive navigation bar adapts its design to different screen sizes, making it easier for users to access the navigation links regardless of the device they are using. In this article, we will explore how to create a responsive navigation bar using HTML, CSS, and JavaScript. If you are new to web development you can check our previous articles to have a background knowledge before proceeding with this project article.

READ ALSO: 10 HTML RULES YOU MUST KNOW

The first step in creating a responsive navigation bar is writing the HTML. We start by creating a header and navigation (nav) element. Within the navigation element, we add an unordered list (ul) to hold the navigation links. Each navigation link is represented as a list item (li) within the unordered list. The final HTML code should look like this:

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

Next, we will add some styles to the navigation bar using CSS. To start, we set a background color and color for the header element and display the header as a flex container. Within the navigation element, we display the unordered list as a flex container and remove the default list style. We also remove any margins and padding from the list items and links. To make the navigation bar responsive, we add a media query to hide the navigation links and display a menu button on small screens. When the menu button is clicked, the navigation links will be shown. The final CSS code should look like this:

header {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin: 0 10px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

/* Media query to hide the navigation links and show a menu button on small screens */
@media (max-width: 700px) {
  nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 10px;
    background-color: #333;
    width: 50%;
    padding: 20px;
    z-index: 1;
  }
  
  nav li {
    margin: 10px 0;
    text-align: center;
  }
  
  /* Show navigation links when the menu button is clicked */
  nav ul.active {
    display: flex;
  }
  
  /* Menu button style */
  .menu-btn {
    display: block;
    color: #fff;
    background-color: #333;
    padding: 10px 20px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1;
  }
}

The final step in creating a responsive navigation bar is to add JavaScript to show and hide the navigation links. We will use JavaScript to toggle a class on the navigation links when the menu button is clicked. Here is the JavaScript code for the responsive navigation bar:

// Show and hide the navigation links
const menuBtn = document.querySelector('.menu-btn');
const nav = document.querySelector('nav ul');

menuBtn.addEventListener('click', function() {
  nav.classList.toggle('active');
});

Creating a responsive navigation bar with HTML and CSS is an important aspect of website design. It ensures that your website is accessible and user-friendly on any device, regardless of screen size. With the steps outlined in this article, you can create a responsive navigation bar that adapts its layout and design to different screen sizes. The combination of HTML, CSS, and JavaScript allows you to create a flexible and responsive navigation bar that provides a seamless user experience for your visitors. Whether you’re a beginner or an experienced web developer, this article provides the knowledge and resources you need to create a responsive navigation bar for your website. Shallout!!!