<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">home.</a></li>
            <li><a href="#">work.</a></li>
            <li><a href="#">about.</a></li>
            <li><a href="#">contact.</a></li>
        </ul>
    </nav>

</body>
</html>

* {
    margin: 0;
    padding: 0;   
}

nav {
    background-color: grey;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none
}

nav ul li {
    padding: 20px 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

nav ul li:hover {
    text-decoration: underline;
    text-decoration-color: red;
}


@media (max-width: 800px) {
    nav ul {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        text-align: center;
    }
    nav {
        background-color: rgb(62, 109, 149);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.