CSS Navigation Bar

A navigation bar is a crucial component of a website, providing users with links to different sections or pages. Using CSS, you can style navigation bars to fit the design of your site and make them responsive for different devices.

Basic Navigation Bar

Here’s a simple example of a horizontal navigation bar:

/* Basic Navigation Bar */
nav {
    background-color: #333;
}

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

nav ul li {
    margin: 0;
}

nav ul li a {
    display: block;
    padding: 14px 20px;
    color: white;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #575757;
}

        

Responsive Navigation Bar

For a responsive navigation bar that collapses into a hamburger menu on smaller screens, you can use media queries:

/* Responsive Navigation Bar */
nav {
    background-color: #333;
}

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

nav ul li {
    margin: 0;
}

nav ul li a {
    display: block;
    padding: 14px 20px;
    color: white;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #575757;
}

/* Mobile Menu */
.menu-toggle {
    display: none;
}

.menu-toggle input {
    display: none;
}

.menu-toggle label {
    display: block;
    padding: 14px 20px;
    background-color: #333;
    color: white;
    cursor: pointer;
}

.menu-toggle label:hover {
    background-color: #575757;
}

.menu-toggle .menu {
    display: none;
}

/* Show menu on mobile */
.menu-toggle input:checked ~ .menu {
    display: block;
}

@media (max-width: 768px) {
    nav ul {
        display: none;
        flex-direction: column;
    }

    nav ul li {
        margin: 0;
    }

    nav ul li a {
        padding: 14px;
        border-top: 1px solid #575757;
    }

    .menu-toggle {
        display: block;
    }
}