0

Quiero pedir ayuda para hacer un menu adaptable a dispositivos moviles, he intentado varias maneras pero no he podido resoverlo, me gustaria que se desplegara con una transicion de arriba hacia abajo pero no puedo lograr que le menu se vea bien, pero solo he podido ocultarlos y cada ves que presiono el menu aparecen bruscamente. El icono de menu me gustaria ponerlo a un costado del icono de whatsapp les dejo mi codigo! Gracias.

.header{
  background: #299767;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -10px;
  padding-top: 10px;
  position: fixed;
  width: 100%;
}
.logo img{
  width: 200px;
  margin: 0;
  padding: 0;
}

.navBar{
  display: inherit;
  align-items: inherit;
  justify-content: inherit;
}
.logIn{
  width: 130px;
  height: 40px;
}
.newUser{
  width: 150px;
  height: 40px;
}
nav a {
    position: relative;
    display: inline-block;
    margin: 15px 25px;
}
<header class="header" id="nav">
  <figure class="logo " id="logo">
    <a href="#"><img src="https://i.imgur.com/7dH1fBl.png" alt=""></a>
  </figure>

  <section class="navBar" >
    <nav class="cl-effect-13" id="cl13">
      <a href="#queHacemos">Qué hacemos</a>
      <a href="#qSomos">Quiénes somos</a>
      <a href="#participar">Cómo puedes participar</a>
      <a href="faq.html">FAQ</a>
    </nav>

    <a href="#" target="blank">
      <img src="https://i.imgur.com/lH6CEyU.png" alt="Whatsapp logo" width="40px">
    </a>
    <a href="#"><button class="logIn" id="login">Log in</button></a>
    <a href="#"><button class="newUser" id="joinus">Crear cuenta</button></a>
  </section>

</header>

1
  • Tu código aún no está adaptado a dispositivos móviles y no se ve el botón de menú que mencionas.
    – Triby
    Commented el 29 may. 2020 a las 18:14

1 respuesta 1

0

Agrega en css una transicion {transition: .5s} ṕor ejemplo le darias una transicion de 0 . 5segundos agregala lo que se va a desplegar o simplemente agrega en css

*{
   transition: .5s
}

eso dara la transicion

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.