How can I create a responsive navigation bar using CSS?

Question

I've tried using the @media query to adjust the styling of the navbar at different screen sizes, but it's not working as expected.

Here's the code I have so far:

.navbar {
    height: 60px;
    background-color: #333;
}

@media (max-width: 600px) {
    .navbar {
        height: 100%;
        flex-direction: column;
    }
}

Answer 1

.navbar {
    height: 60px;
    background-color: #333;
}

@media screen and (max-width: 600px) {
    .navbar {
        height: 100%;
        flex-direction: column;
    }
}