How to Create a Responsive Navigation Menu with CSS

In this blog post, we will learn how to create a responsive navigation menu using CSS. A navigation menu is an essential component of a website as it helps users navigate through different pages or sections. We will be using CSS to achieve a responsive and user-friendly navigation menu.

Step 1: HTML structure

Let's start by creating the HTML structure for our navigation menu. Open your favorite text editor and create a new HTML file. Paste the following code into the file:

<nav class="navigation-menu">
  <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>

In the above code, we have a <nav> element with a class of "navigation-menu". Inside the <nav> element, we have an unordered list <ul> with four list items <li>. Each list item contains an anchor tag <a> with a hashtag as the href attribute value. You can replace these hashtags with your desired page URLs.

Step 2: CSS styling

Now, let's add some CSS to style our navigation menu. Create a new CSS file and link it to your HTML file.

<link rel="stylesheet" href="styles.css">

In the CSS file, add the following code:

.navigation-menu {
  background-color: #f1f1f1;
  padding: 10px;
}

.navigation-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.navigation-menu li {
  display: inline;
}

.navigation-menu a {
  text-decoration: none;
  color: #000;
  padding: 10px;
}

.navigation-menu a:hover {
  background-color: #ccc;
}

In the above code, we have applied some basic styles to our navigation menu. We have set the background color, padding, and display property of the navigation menu container. We have used flexbox to align the list items horizontally and space-between to distribute the space evenly between them. We have also styled the anchor tags to remove the default underline, set the padding, and added a hover effect.

Step 3: Making it responsive

To make our navigation menu responsive, we can use media queries. Add the following code to your CSS file:

@media screen and (max-width: 768px) {
  .navigation-menu ul {
    flex-direction: column;
    align-items: center;
  }

  .navigation-menu li {
    display: block;
    margin-bottom: 10px;
  }
}

In the above code, we have used a media query to target screens with a maximum width of 768px. Inside the media query, we have changed the flex-direction property of the unordered list to column to stack the list items vertically. We have also changed the display property of the list items to block and added some margin at the bottom for better readability on smaller screens.

Conclusion

In this blog post, we have learned how to create a responsive navigation menu using CSS. We started by creating the HTML structure and then applied some basic styles using CSS. Finally, we made our navigation menu responsive using media queries. By following these steps, you can create a user-friendly navigation menu for your website that looks great on both desktop and mobile devices.

I hope you found this tutorial helpful. If you have any questions, feel free to leave a comment below!