CSS Navigation Bar

A navigation bar (navbar) is a crucial element in web design that helps users navigate through your website. In this chapter, we will cover how to create a basic navigation bar using HTML and CSS.

1. Basic Navigation Bar

To create a basic navigation bar, you need to use a combination of HTML for the structure and CSS for styling.

<!-- HTML -->
<div class="navbar">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
</div>

<!-- CSS -->
<style>
.navbar {
    overflow: hidden;
    background-color: #333;
}
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.navbar a:hover {
    background-color: #ddd;
    color: black;
}
.navbar a.active {
    background-color: #4caf50;
    color: white;
}
</style>

2. Horizontal Navigation Bar

Creating a horizontal navigation bar involves setting the display property to inline-block and floating the links to the left.

<!-- HTML -->
<div class="navbar">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
</div>

<!-- CSS -->
<style>
.navbar {
    overflow: hidden;
    background-color: #333;
}
.navbar a {
    float: left;
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.navbar a:hover {
    background-color: #ddd;
    color: black;
}
.navbar a.active {
    background-color: #4caf50;
    color: white;
}
</style>

3. Vertical Navigation Bar

A vertical navigation bar can be created by not floating the links and setting the width of the container.

<!-- HTML -->
<div class="navbar vertical">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
</div>

<!-- CSS -->
<style>
.navbar.vertical {
    width: 200px;
}
.navbar.vertical a {
    float: none;
    display: block;
}
</style>

4. Responsive Navigation Bar

To make the navigation bar responsive, use media queries to adjust the layout based on the screen size.

<!-- HTML -->
<div class="navbar">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
</div>

<!-- CSS -->
<style>
.navbar {
    overflow: hidden;
    background-color: #333;
}
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.navbar a:hover {
    background-color: #ddd;
    color: black;
}
.navbar a.active {
    background-color: #4caf50;
    color: white;
}

@media screen and (max-width: 600px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}
</style>

Conclusion

Creating a navigation bar with CSS involves understanding how to use floats, inline-block elements, and media queries. By mastering these techniques, you can create responsive and visually appealing navigation bars for your website.