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>