Cómo crear un Navbar Responsive solo con HTML y CSS

<nav class="navbar"> 
  
  <div class="logo">MiLogo</div> 

  
  <input type="checkbox" id="nav-check"> 
  <label for="nav-check" class="nav-toggle"> 
      <i class="fa-duotone fa-solid fa-bars"></i> 
  </label>

  
  <ul class="nav-links"> 
    <li><a href="#">Inicio</a></li> 
    <li><a href="#">Servicios</a></li> 
    <li><a href="#">Contacto</a></li> 
  </ul>
</nav>

<nav class="navbar"> 
  
  <div class="logo">MiLogo</div> 

  
  <input type="checkbox" id="nav-check"> 
  <label for="nav-check" class="nav-toggle"> 
      <i class="fa-duotone fa-solid fa-bars"></i> 
  </label>

  
  <ul class="nav-links"> 
    <li><a href="#">Inicio</a></li> 
    <li><a href="#">Servicios</a></li> 
    <li><a href="#">Contacto</a></li> 
  </ul>
</nav>

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
      integrity="sha512-..." 
      crossorigin="anonymous"
      referrerpolicy="no-referrer" />

/* --- Reseteo básico --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- Estilos Generales del Navbar (Modo Desktop por defecto) --- */
.navbar {
    background-color: #2c3e50; /* Color de fondo oscuro */
    color: #ecf0f1; /* Color de texto claro */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;

}

.logo {
    font-size: 24px;
    font-weight: bold;
}

/* Estilos de la lista de links */
.nav-links {
    list-style: none;
    display: flex; /* En desktop se muestran en fila horizontal */
    gap: 24px; /* Espacio entre los links */
}

.nav-links a {
    text-decoration: none;
    color: #ecf0f1;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #3498db; /* Color celeste al pasar el mouse */
}

/* --- ELEMENTOS DEL HACK (Ocultos en Desktop) --- */

/* El checkbox SIEMPRE debe estar oculto. Es el motor invisible. */
#nav-check {
    display: none;
}

/* El botón hamburguesa (label) oculto en pantallas grandes */
.nav-toggle {
    display: none;
    font-size: 18px;
    cursor: pointer;
}

/* =====================================================
   MEDIA QUERY para dispositivos móviles y tablets
   (Aplica estilos cuando el ancho de la pantalla es
   menor o igual a 768px)
===================================================== */
@media (max-width: 768px) {

    /* Ajustamos la altura del navbar para pantallas pequeñas */
    .navbar {
        height: 60px;
    }

    /* Mostramos el botón hamburguesa (en desktop suele estar oculto) */
    .nav-toggle {
        display: block;
    }

    /* Menú de links en modo móvil: ocupa toda la pantalla, se posiciona fijo y entra animado desde la derecha */
    .nav-links {
        width: 100%;          /* El menú ocupa todo el ancho */
        position: fixed;      /* Se mantiene fijo aunque se haga scroll */
        height: 100%;         /* Ocupa todo el alto de la ventana */
        z-index: 1;           /* Se muestra por encima del contenido */
        top: 0;
        left: 800px;          /* Lo dejamos fuera de la pantalla a la derecha */
        flex-direction: column; /* Los elementos del menú se apilan verticalmente */
        text-align: center;
        margin-top: 60px;     /* Dejamos espacio para el navbar de arriba */
        padding-top: 40px;    /* Separación interior para que no quede pegado */
        background-color: #2c3e50;
        transition: 0.5s;     /* Animación suave al mostrar/ocultar el menú */
    }

    /* Cada link del menú ocupa todo el renglón para que sea más fácil de tocar con el dedo */
    .nav-links li a {
        padding: 10px;
        display: block; /* Todo el ancho del renglón es clickeable */
    }

    /* Checkbox Hack para abrir el menú: cuando #nav-check está marcado, movemos la lista a la vista */
    #nav-check:checked ~ .nav-links {
        left: 0px;  /* Movemos el menú a la vista (desde la derecha hacia adentro) */
    }
}