<!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">
  <title>Responsive navbar with HTML & CSS</title>
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
  <nav>
    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
      <i class='bx bx-grid-alt'></i>
    </label>
    
    <label for="" class="logo">atulcodeX</label>
    <ul>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <section></section>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;1,200&display=swap');

*
{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body
{
  font-family: "poppins", sans-serif;
}

nav
{
  background: #27ae60;
  height: 60px;
  width: 100%;
}

label.logo
{
  color: #fff;
  font-size: 35px;
  line-height: 60px;
  padding: 0 100px;
  font-weight: bold;
}

nav ul
{
  float: right;
  margin-right: 20px;
}

nav ul li
{
  display: inline-block;
  line-height: 60px;
  margin: 0 5px;
}

nav ul li a
{
  color: #fff;
  font-size: 17px;
  padding: 5px 13px;
  border-radius: 3px;
  text-transform: upparcase;
}

a.active,a:hover
{
  background: #2ecc71;
  trasition: .5s;
}

.checkbtn
{
  font-size: 28px;
  color: #fff;
  float: right;
  line-height: 60px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}

#check
{
  display: none;
}

section
{
  background: url(https://source.unsplash.com/1600x900/?car) no-repeat;
  background-size: cover;
  height: calc(100vh - 60px);
}

/* ------------ Small laptop screen ----------- */
@media screen and (max-width: 952px)
{
  label.logo
  {
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a
  {
    font-size: 16px;
  }
}


/* --------------- tablet and mobile screen ----------------- */
@media screen and (max-width: 858px)
{
  label.logo
  {
    font-size: 20px;
    padding-left: 50px;
  }
  
  .checkbtn
  {
    display: block;
  }
  
  ul
  {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #78e08f;
    top: 60px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  
  nav ul li
  {
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  
  nav ul li a
  {
    font-size: 20px;
  }
  
  a:hover,a.active
  {
    background: none;
    color: #000;
  }
  
  #check:checked ~ ul
  {
    left: 0;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.