Estou desenvolvendo um menu responsivo e ele funciona normalmente, quando entra na media query para tablet ele esconde o menu e só é possível visualiza-lo através do click no botão, porém quando o menu está escondido e volto para resolução de desktop o menu continua escondido. No entanto se eu deixo o menu ativo na resolução de tablet e vou para desktop lá está o menu.
Exemplo do código :
$(document).ready(function() {
$('button').click(function(){
$('nav').toggle();
});
});
* {
outline: none;
text-decoration: none !important;
list-style: none;
}
nav {
background-color: #f2f2f2;
height: 40px;
}
ul {
}
li {
width: 150px;
display: inline-block;
}
a {
color: black;
}
button {
display: none !important;
}
@media screen and (max-width: 786px) {
button {
display: block !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Cadastre-se</a></li>
</ul>
</nav>
<button class="btn btn-primary">Menu Responsivo</button>
</header>
</body>