0

Tengo el menú hamburguesa y funciona bien, desplegando la lista; pero están juntos los dos iconos "fas fa-bars" y "fas fa-times"

Como hago para que se muestre solo uno por vez? Debo hacerlo solo con CSS. Copio parte del código de Html5 y del CSS3 con Sass Hace poco he comenzado a aprender. Muchas Gracias!!

 <div class="respmenu">
            <nav>
            <input type="checkbox" id="hamburger">
            <label for="hamburger">
                <i class="fas fa-bars"></i>
                <i class="fas fa-times"></i>
            </label>
                 <ul>
                    <li><a href="#episodios">EPISODIOS</a></li>
                    <li><a href="#nosotros">NOSOTROS</a></li>
                    <li><a href="#entrevistas">ENTREVISTAS</a></li>
                    <li><a href="#topicos">TÓPICOS</a></li>
                </ul>
            </nav>
        </div>


.respmenu{
        input{
          display:none;
        }

        input:checked ~ ul{
           display: block;}
        }

4
  • segun tu logica en que momento debe mostrarce cada uno??
    – user46896
    el 29 dic. 2020 a las 22:29
  • Hola Francisco! según mi lógica, cuando esta en display none la lista del menú deberia solo verse el icono del menú hamburguesa y cuando la lista está desplegada, debería verse solo el ícono de X, para cerrarla. Gracias por tu colaboración ! el 1 ene. 2021 a las 12:20
  • ese es el problema le estas poniendo el css al ok input en que momento se lo colocas al icono???
    – user46896
    el 2 ene. 2021 a las 3:05
  • ahh, es cierto Francisco. Muchas gracias!! el 3 ene. 2021 a las 23:16

1 respuesta 1

1

te hace falta colocarle el CSS tambien al input:

.respmenu{
        input{
          display:none;
        }

        input:checked ~ ul{
           display: block;
        }

        i{
          display:none;
        }
}

o si quieres alternar entre uno y el otro deberás trabajarlo con javascript/jquery.

2
  • 1
    Muchas gracias Francisco! el 11 ene. 2021 a las 20:38
  • @EmilioOscarAlmeida si la respuesta resuelve el problema te sugiero marcarla como resuelta ya que eso te da puntos.
    – user46896
    el 18 ene. 2021 a las 14:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.