Как сделать меню для мобильных устройств? - PullRequest
Новая
       62

Как сделать меню для мобильных устройств?

0 голосов
/ 28 мая 2020

Я хочу попросить помочь сделать меню адаптируемым к мобильным устройствам, я пробовал несколько способов, но не смог решить, я бы хотел, чтобы оно отображалось с переходом сверху вниз, но я не могу сделать меню хорошо выглядят, но мне удалось их только скрыть. Пожалуйста, помогите мне, это сводит меня с ума. Значок меню, который я хотел бы поставить рядом со значком WhatsApp, оставляю вам свой код! Спасибо. 

.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>
...