<nav>
  <input type="checkbox" id="check">
  <label for="check" class="checkbtn">
    <i class="fas fa-bars"></i>
  </label>
  <label for="" class="logo">CodeWave</label>
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Feedback</a></li>
    
  </ul>
</nav>
<section>
  
</section>

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
  text-decoration:none;
  list-style:none;
}
body {
  font-family:montserrat;
}
nav {
  height:80px;
  background: #0082e6;
  width:100%;
}
label.logo {
  color:white;
  line-height:80px;
  font-size: 35px;
  padding:0 100px;
  font-weight:bold;
}
nav ul {
  float: right;
  margin-right:20px;
}
nav ul li {
  line-height:80px;
  display:inline-block;
  margin:0 5px;
}
nav ul li a {
  text-transform:uppercase;
  font-size: 16px;
  color: white;
  padding:7px 13px;
  border-radius:3px;
}
a.active,a:hover {
  background: #1b9bff;
  transition:0.5s;
}
.checkbtn {
  font-size:30px;
  color:white;
  float:right;
  line-height:80px;
  margin-right:40px;
  cursor:pointer;
  display:none;
}
#check {
  display:none;
}
@media (max-width:952px) {
  label.logo {
    font-size:30px;
    padding-left:50px;
  }
  nav ul li a {
    font-size:16px;
  }
}
@media (max-width:858px) {
  .checkbtn {
    display:block;
  }
 ul {
    position: fixed;
    height:100vh;
    width:100%;
    background: #2c3e50;
    top:80px;
    left:-100%;
    text-align:center;
    transition: all .5s;
  }
  nav ul li {
    display:block;
    line-height:30px;
    margin:50px 0;
  }
  nav ul li a {
    font-size: 20px;
  }
  a.active,a:hover {
    background:none;
    color: #0082e6;
  }
  #check:checked ~ ul {
    left:0;
  }
}
section {
  background:#2c3e50;
  height:86vh;
}