https://blogger.googleusercontent.com/img/a/AVvXsEiuOWoneWGDSPtZVy4xHV--CHKSMVD8vGe4Q4qd0aMUJNiAyKnNynhWSqJPfivshe0eXoBkcyzsnYUyxHDt0EDaIA-JpWKlQd2A5p10Sz9qd9N15Ao7DEVYr3IU-BGTen3B-pzQe15-ORDgm1nl0_tKsp-cFN8ZrtjLLtVoLZgQuAr3uVn_YfCr1BP3Au8=s16000/
Published: Sep 4, 2024

In today's digital age, where users access websites from a variety of devices, creating a responsive design has become essential. A responsive navigation bar makes sure that users across both big and smaller devices can access your website or application. Making one doesn't have to be extremely difficult. In this article we will go over how to create an easy navigation bar of your own.

You can find this project on my GitHub here, you can also see the project in action in this sandbox.

HTML Structure

Let's start by building the basic HTML structure for our navigation bar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navigation Bar</title>
  <link rel="stylesheet" href="style.css">
  <script src="scripts.js"></script>
</head>
<body>
  <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>
      <span    id="menu-toggle>&amp#9776;</span>
    </nav>
    </header>
  </body>
</html>

This structure includes a header element containing a nav element with an unordered list (ul) of menu items. As of right now, your navigation bar doesn't look like much. That is because the HTML doesn't handle the styling or the behavior. Only the elements themselves. So, at this time your nav bar should look something like below:

CSS Styling

Since our navigation bar is structured, let's style it so we can get the basic look of what we are wanting. In the same directory, create a file called style.css and write the following code:

body {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #323361;
  color: #fff;
}

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

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 5px;
}

nav ul li a:hover {
  background-color: #4d3d70;
}
#menu-toggle {
    display: none;
}

/* Media query for small screens */
@media (max-width: 768px) {
  header nav ul {
    display: none;
  }

  header nav ul.show {
    display: block;
    text-align: center;
    background-color: #333;
    padding: 1rem;
  }

  header nav ul.show li {
    display: block;
    margin: 0.5rem;
  }
  #menu-toggle {
    display: inline-block;
  }
}

This CSS code:

  • Styles the navigation bar to have a fixed background color and white text.
  • Uses Flexbox to arrange the menu items horizontally.
  • Applies a media query to hide the menu on smaller screens and display it as a dropdown when needed.
  • It hides the toggle button when the screen is larger, but shows it when it becomes smaller.
  • The media query is the way that CSS gives rules (or rather styling) to html elements when certain criteria are met. In this instance, whenever the screen is below 768 pixels wide we will give the styling that is in the media query to these elements.

Flexbox is a way CSS can control the display of the elements that are within it. You can find more information on Flexbox here.

Note: One thing important to note is that normally you would utilize CSS classes to give the styling. This method is for informational purposes, but it works perfectly fine for this project.

Let's Add a Toggle Button (JavaScript!)

If you want to add a toggle button to reveal the menu on smaller screens, you can use JavaScript. Open up a set of script tags below your header element closing tag (but still within the body element!) and write the following code:

...
    </header>
    <script>
        const menuToggle = document.getElementById('menu-toggle')
        const navigation = document.querySelector('nav ul')
       menuToggle.addEventListener('click', () => {
           navigation.classList.toggle('show');
        });
    </script>

Now your navigation bar should be functional! Go ahead and try it out! If you run into any issues, just compare your code to mine or the REPL I included at the top and see what might have happened. Troubleshooting is a valuable skill when it comes to development.

Conclusion


By utilizing CSS, we made our navigation bar look more professional. Then we used JavaScript to show the hidden navigation when the screen was smaller, which gives us the responsiveness we need to allow small screens to see and use our navigation bar easier.

You can play with this code and change the colors, links, etc. to get a better understanding of how this all works. If you want the links to go somewhere, change the "#" within the href attributes of the links to point them to the website or web page you want them to go to.

Author:

Chase Quinn

Chase Quinn