0

Estou tentando criar um menu hambúrguer com jQuery, porém com o seguinte problema: menu é criado de acordo com o width estabelecido na media query e quando clico em um dos links da barra de navegação ele some. Porém, se eu volto o site pro tamanho normal, a barra de navegação nao está mais visível, apenas o logo, pro menu de navegação aparecer de novo tenho que dar refresh. Como posso consertar isso?

$('.mobile-menu').on('click', function() {
  $('.navbar').slideToggle();
});

$('.navbar').click(function() {
  $(this).hide();
});
.mobile-menu {
  color: white;
  position: absolute;
  right: 20px;
  display: none;
}

@media only screen and (max-width: 768px) {
  .mobile-menu {
    display: block;
  }
  .navbar {
    display: none;
    flex-direction: column;
    background: var(--secondary);
    width: 11rem;
    position: absolute;
    right: 0;
    top: 60px;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<header>
  <div class="logo">
    <i class="fas fa-code fa-3x"></i>
  </div>

  <div class="mobile-menu"><i class="fa fa-bars fa-2x"></i></div>

  <nav class="navbar">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#projects">Projetos</a></li>
      <li><a href="#contact">Contato</a></li>
    </ul>
  </nav>
</header>

1 Resposta 1

-2

Coloque um media query para que o navbar mude para display:block

1
  • 1
    O navbar já está com media query. Mas aí eu coloco block no lugar de none?
    – jackdoe
    Commented 4/02/2021 às 19:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .