Responsive navigation just using CSS

Question

How to create responsive navigation bar for desktop and mobile just using CSS without any JavaScript. I want the functionality of toggling as it is in menus.

Answer 1

You can do it in this way.

View codepen: https://codepen.io/ikramulhaqdev24/pen/vYLpzQp

In html, write this code:

<input type="checkbox" id="toggler" />
<label for="toggler" class="toggler-icons">
    <i class="fas fa-bars" aria-hidden="true"></i>
    <i class="fas fa-times" aria-hidden="true"></i>
</label>

In CSS:

#toggler {
  display: none;
}

.toggler-icons :where(.fa-bars, .fa-times) {
  font-size: 2rem;
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  border: 0.1rem solid #fff;
  display: none;
}

@media (max-width: 768px) {
  .navbar ul {
    position: absolute;
    flex-direction: column;
    top: 99%;
    left: 0;
    right: 0;
    background: #333;
    border-top: 0.1rem solid #ccc;
    transition: all 0.3s linear;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }

  .navbar ul li a {
    margin: 0.5rem;
    margin-left: 2rem;
    padding: 0.5rem;
    display: block;
  }

  .toggler-icons .fa-bars {
    display: block;
  }

  #toggler:checked ~ ul {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  #toggler:checked ~ .toggler-icons .fa-times {
    display: block;
  }

  #toggler:checked ~ .toggler-icons .fa-bars {
    display: none;
  }
}

You can replace clip-path according your taste with transform, display...