Pure CSS Mobile Menu (no JS)

HTML

<header class="container">
    <div class="header-container">

      <label for="nav-checkbox" class="hide-lg"><img src="https://cdn0.iconfinder.com/data/icons/social-messaging-productivity-4/128/menu-2-128.png" alt="burger-menu" class="burger-menu"></label>

      <nav>
        <input type="checkbox" class="nav-checkbox hide" id="nav-checkbox" />
        <ul class="navigation">
          <li class="nav-item"><a href="#">WORK</a></li>
          <li class="nav-item"><a href="#">ABOUT</a></li>
          <li class="nav-item"><a href="#">CONTACT</a></li>
          <li class="nav-item"><a href="#">WHAT I DO</a></li>
        </ul>
      </nav>

    </div>
  </header>

CSS

ul {
  list-style: none;
  padding-left: 0;
}

a {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.hide {
  display: none;
}

.header-container {
  padding-bottom: 7px;
}

.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 42px;
}

.burger-menu {
  height: 28px;
}

.nav-item {
  padding: 7px 14px 7px 0;
}

@media (max-width: 1199px) {
  .header-container {
    border-bottom: 1px solid #F5F5F5;
  }
  .header-container,
  .burger-menu {
    margin-top: 7px;
  }
  .burger-menu {
    display: inline-block;
    float: left;
    width: 28px;
  }
  .navigation {
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: 0.8s;
  }
  .nav-item {
    border-top: 1px solid #F5F5F5;
  }
  .nav-checkbox:checked~ .navigation {
    max-height: 250px;
  }
}

@media (min-width: 1200px) {
  .hide-lg {
    display: none;
  }
  .header-container {
    margin-top: 14px;
  }
  .logo {
    height: 70px;
  }
  .nav-item {
    display: inline-block;
    font-size: 120%;
  }
}