<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <title>Responsive Navbar</title>
</head>
<body>
    <nav>
    <button class="my-button" id="my-button">
        <i class="fas fa-bars"></i>
    </button>
        <ul id="mynav">
            <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;   
}

.my-button {
  background-color: transparent;
  border: 10px;
  color: black;
  cursor: pointer;
  font-size: 30px;
  margin-left: 32px;
  float: left;
  line-height: 70px;
  display: none;
}

.my-button:focus {
  outline: none;
}

nav {
    background-color: grey;
    flex-wrap: wrap;
}

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 {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  
  nav ul.show {
    display: flex;
  }
  
  .my-button {
    display: block;
  }
}

@media (max-width: 600px) {
    nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  
  nav ul.show {
    display: flex;
  }
  
  .my-button {
    display: block;
  }
    nav {
        background-color: rgb(62, 109, 149);
    }
}

const button = document.getElementById("my-button");
const nav = document.getElementById("mynav");

button.addEventListener('click', () => {
  nav.classList.toggle('show');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.