How do I style a responsive navigation bar using CSS and HTML?

I'm trying to create a responsive navigation bar using only HTML and CSS, but I'm having trouble with the layout. Here's my code:

1<nav>
2    <ul class="navbar">
3        <li><a href="#">Home</a></li>
4        <li><a href="#">About</a></li>
5        <li><a href="#">Services</a></li>
6        <li><a href="#">Contact</a></li>
7    </ul>
8</nav>
9
10<style>
11    .navbar {
12        display: flex;
13        list-style-type: none;
14        justify-content: space-around;
15    }
16
17    .navbar li {
18        padding: 10px;
19    }
20
21    @media (max-width: 768px) {
22        .navbar {
23            flex-direction: column;
24            align-items: center;
25        }
26    }
27</style>

1<nav>
2    <ul class="navbar">
3        <li><a href="#">Home</a></li>
4        <li><a href="#">About</a></li>
5        <li><a href="#">Services</a></li>
6        <li><a href="#">Contact</a></li>
7    </ul>
8</nav>
9
10<style>
11    .navbar {
12        display: flex;
13        list-style-type: none;
14        justify-content: space-around;
15    }
16
17    .navbar li {
18        padding: 10px;
19    }
20
21    @media (max-width: 768px) {
22        .navbar {
23            flex-direction: column;
24            align-items: center;
25        }
26    }
27</style>

Styling a Responsive Navigation Bar with HTML and CSS

Creating a responsive navigation bar using HTML and CSS is a great way to enhance your website's usability. Below is a refined version of your code along with explanations to help you achieve a responsive layout.

HTML Structure

Your HTML structure is good. Here’s a simple navigation bar:

1<nav>
2    <ul class="navbar">
3        <li><a href="#">Home</a></li>
4        <li><a href="#">About</a></li>
5        <li><a href="#">Services</a></li>
6        <li><a href="#">Contact</a></li>
7    </ul>
8</nav>

1<nav>
2    <ul class="navbar">
3        <li><a href="#">Home</a></li>
4        <li><a href="#">About</a></li>
5        <li><a href="#">Services</a></li>
6        <li><a href="#">Contact</a></li>
7    </ul>
8</nav>

CSS Styling

Your CSS is on the right track, but let's enhance it a bit for better responsiveness and aesthetics. Here’s an improved version:

1<style>
2    body {
3        margin: 0;
4        font-family: Arial, sans-serif;
5    }
6
7    nav {
8        background-color: #333; /* Dark background for the navbar */
9    }
10
11    .navbar {
12        display: flex;
13        list-style-type: none;
14        justify-content: space-around;
15        padding: 10px 0; /* Add some padding for better spacing */
16        margin: 0; /* Remove default margin */
17    }
18
19    .navbar li {
20        padding: 10px;
21    }
22
23    .navbar a {
24        color: white; /* White text color */
25        text-decoration: none; /* Remove underline */
26        padding: 10px 15px; /* Add padding for clickable area */
27        transition: background-color 0.3s; /* Smooth transition for hover effect */
28    }
29
30    .navbar a:hover {
31        background-color: #575757; /* Darker background on hover */
32    }
33
34    @media (max-width: 768px) {
35        .navbar {
36            flex-direction: column; /* Stack items vertically */
37            align-items: center; /* Center items */
38        }
39
40        .navbar li {
41            width: 100%; /* Make each item full width */
42            text-align: center; /* Center text */
43        }
44    }
45</style>

1<style>
2    body {
3        margin: 0;
4        font-family: Arial, sans-serif;
5    }
6
7    nav {
8        background-color: #333; /* Dark background for the navbar */
9    }
10
11    .navbar {
12        display: flex;
13        list-style-type: none;
14        justify-content: space-around;
15        padding: 10px 0; /* Add some padding for better spacing */
16        margin: 0; /* Remove default margin */
17    }
18
19    .navbar li {
20        padding: 10px;
21    }
22
23    .navbar a {
24        color: white; /* White text color */
25        text-decoration: none; /* Remove underline */
26        padding: 10px 15px; /* Add padding for clickable area */
27        transition: background-color 0.3s; /* Smooth transition for hover effect */
28    }
29
30    .navbar a:hover {
31        background-color: #575757; /* Darker background on hover */
32    }
33
34    @media (max-width: 768px) {
35        .navbar {
36            flex-direction: column; /* Stack items vertically */
37            align-items: center; /* Center items */
38        }
39
40        .navbar li {
41            width: 100%; /* Make each item full width */
42            text-align: center; /* Center text */
43        }
44    }
45</style>

Explanation

Flexbox Layout: The .navbar uses display: flex to create a flexible layout. The justify-content: space-around evenly spaces the items.
Responsive Design: The media query adjusts the layout for screens smaller than 768px, stacking the items vertically and centering them.
Styling Links: The links are styled with a white color and a hover effect that changes the background color for better user interaction.
Padding and Margins: Added padding to the navbar and removed default margins to ensure a clean layout.

Conclusion

With these adjustments, your navigation bar should be responsive and visually appealing. You can further customize colors and styles to match your website's theme. Happy coding!