<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href=" ./style.css">
   <title>Nav</title>
 </head>
 <body>
   
     <input type="checkbox" id="nav-toggle" class="nav-toggle">
    <label for="nav-toggle" class="nav-toggle-label">
        <span></span>
    </label>
 </body>
 </html>
*,*::before,*::after{
  box-sizing:border-box;
}
body{
  background-color:#1c1d25;
}

  .nav-toggle {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
  .nav-toggle-label {
    position: absolute;
    top:-20%;
    left:50%;
    transform: translate(-50%,-20%);
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    transform: rotate(-180deg);
  }
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after { 
    display: block;
    background: #f3f3f3;
    height: 3px;
    width: 2.15em;
    border-radius: 2px;
    position: relative;
    background-color: #f3f3f3;
     transition: 200ms all;
  }
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    content: '';
    position: absolute;
  }
  .nav-toggle-label span::before {
    bottom: 8px;
  }
  .nav-toggle-label span::after {
    top: 8px;
  }
  .nav-toggle:checked ~ nav {
    transform: scale(1,1);
  }
  .nav-toggle:checked ~ nav a {
    opacity: 1;
    transition: opacity 600ms ease-in-out 250ms;
  }
  .nav-toggle:checked ~ .nav-toggle-label span{
    background-color: #ff1443;
    transform: rotate(45deg);
    transition: 200ms all;
    z-index: 9999!important;
    width: 2.25em;
}
  .nav-toggle:checked ~ .nav-toggle-label span::after {
    background-color:#ff1443;
    margin-top:-.5rem;
    transform: rotate(-90deg);
    transition: 200ms all;
    z-index: 9999!important;
    width: 2.25em;
  }
    .nav-toggle:checked ~ .nav-toggle-label span::before{
       display:none;
  }

 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.