In this tutorial, we will learn how to create a stylish and responsive navigation bar using HTML and CSS. The navigation bar will consist of a header and a navbar that will contain links to different sections of a website. This tutorial is perfect for beginners who want to improve their CSS skills and create a professional-looking navigation bar for their website.
Step 1: Set up the HTML structure
First, let’s set up the basic HTML structure for our navigation bar. Create a new HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Header and Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>Website Name</h1>
<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>
</div>
</header>
</body>
</html>In this code, we have created a basic HTML structure with a header element that contains a title and a navigation element with an unordered list of links.
Step 2: Style the navigation bar with CSS
Now, let’s style the navigation bar using CSS. Create a new file called styles.css and add the following code:
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
h1 {
margin: 0;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #fff;
}In this CSS code, we have styled the header element with a background color, text color, and padding. We have also created a container class to center the content and add some spacing around it. The navigation links are styled as a horizontal list with some margin between each link.
Step 3: Make the navigation bar responsive
To make the navigation bar responsive, we can use media queries to adjust the styling for different screen sizes. Add the following code to your styles.css file:
@media only screen and (max-width: 768px) {
.container {
padding: 0 10px;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin: 10px 0;
}
}In this code, we have used a media query to change the layout of the navigation bar to a vertical list on screens with a maximum width of 768px. This will make the navigation bar more user-friendly on smaller devices like smartphones and tablets.
Step 4: Test your navigation bar
Save your files and open the HTML file in a web browser to see your navigation bar in action. You should see a stylish and responsive navigation bar with links to different sections of your website. You can further customize the navigation bar by adding hover effects, animations, and other CSS properties.
Congratulations! You have successfully created a CSS header and navbar using HTML and CSS. This navigation bar will help users navigate your website easily and improve the overall user experience. Feel free to experiment with different styles and layouts to create a unique navigation bar for your website.
