<header>
  <div class="logo">
    <h1 class="logo-text">LOGO</h1>
    <button class="hamburger-icon">
      <label for="dropdown">
        <i class="fa-solid fa-bars"></i>
        <i class="fa-solid fa-x"></i>
      </label>
      <input type="checkbox" id="dropdown" />
    </button>
  </div>
  <ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

/* hiding the hamburger icon for the desktop view */
.hamburger-icon{
display:none;
border:none;
background-color:transparent;
}

/* Hiding the checkbox default styling */
.hamburger-icon input[type="checkbox"] {
  appearance: none;
}
.
.
.
/* targeting the element for the 
viewport less than 600px*/
@media screen and (max-width: 600px) {
/* Hiding the nav links with height and overflow */
 .navigation {
    height:0;
    overflow:hidden;
    flex-direction: column;
    align-items: center;
    transition:all 0.5s ease-in-out;
  }

/* It will put the Logo text at left end 
and Hamburger at the right end of the header */
.logo {
    display: flex;
    justify-content: space-between;
  }
}

/* Making the hamburger button visible */
.hamburger-icon {
    display: block;
  }

/* Initially hiding the cross icon */
.fa-x{
    display:none;
  }

/*determining whether the header contains a checkbox input that is checked before expanding the navigation's height to 100 pixels to make it visible.*/
  header:has(.hamburger-icon input[type="checkbox"]:checked) .navigation {
    margin-top: 1rem;
    height:100px;
  }

/* Hiding the bars icon on checkbox checked state */
  header:has(.hamburger-icon input[type="checkbox"]:checked) .fa-bars {
    display:none;
  }

/* Showing the cross icon on checkbox checked state */
  header:has(.hamburger-icon input[type="checkbox"]:checked) .fa-x {
    display:inline-block;
  }