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>