EDIT
Depois dos seus comentários o seu problema ficou mais claro. Na verdade que faz o menu expandir e recolher é essa regra CSS nav #menu-toggle:checked ~ ul
então o que vc precisa é fazer com que se o link do menu for clicado o menu se recolha alterando o estado cheked
do input.
Para isso vc precisa fazer um .trigger('click')
no seu input:checkbox
, não precisa usar os métodos slideToggle
etc, pois que vai fazer esse efeito é o sue CSS #menu-toggle:checked
, para entender melhor veja o código abaixo.
$('.navBar li a').click(function() {
$('#menu-toggle').trigger('click');
});
.navBar {
position: fixed;
min-width: 100%;
z-index: 3;
background:#000F23;
}
.logo {
display: inline-block;
height: 42px;
margin: 45px 20px ;
width: 187px;
}
.wrapper {
margin: 0 auto;
max-width: 100%;
padding: 0 2%;
}
nav ul {
display: flex;
justify-content: space-between;
list-style-type: none;
min-width: 40%;
}
nav ul a {
color: #FFF;
text-decoration: none;
transition: all 0.5s ease;
}
nav ul a:hover {
color: #AAA;
}
nav li {
display: inline-block;
padding: 6px 17px;
font-size: 20px;
font-family: 'Brandon Grotesque';
font-weight: normal;
font-style: normal;
}
nav ul li:last-child a{
padding: 6px 17px;
border: 2px solid;
border-radius: 5px;
color: #00E4D9;
}
#menu-icon { display: none; /* hide menu icon initially */}
nav ul li:last-child a:hover{
color: #00ABAF;
}
nav #menu-toggle {
display: none;
}
nav .label-toggle {
display: none;
}
nav .wrapper {
align-items: center;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
nav nav ul a {
color: #FFF;
}
nav ul {
background-color: #000F23;
display: block;
height: 0;
list-style-type: none;
opacity: 0;
text-align: center;
transition: all 1s ease;
width: 100%;
visibility: hidden;
}
nav li {
color: #53354A;
display: block;
font-size: 1.5em;
padding: 1em 0;
text-align: center;
}
nav #menu-toggle:checked ~ ul {
opacity: 1;
height: 100vh;
visibility: visible;
background:#000F23;
}
nav .label-toggle {
background: linear-gradient(to bottom, #FFF 0%, #FFF 20%, transparent 20%, transparent 40%, #FFF 40%, #FFF 60%, transparent 60%, transparent 80%, #FFF 80%, #FFF 100%);
cursor: pointer;
display: block;
float: right;
height: 35px;
margin-top: 3em;
margin-right: 2em;
width: 35px;
}
nav .wrapper {
display: block;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<nav class="navBar">
<nav class="wrapper">
<div class="logo">
LOGO</div>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="label-toggle"></label>
<ul>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#funcionalidades">Funcionalidades</a></li>
<li><a href="#planos">Planos</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="cadastro.html">Inscrever-se</a></li>
</ul>
</nav>
</nav>
OBS: Vc não deveria usar uma <nav>
dentro da outra, o correto seria um <header><nav></nav></header>
ou colocar a classe .wrapper
na nav
de fora assim evitando usar <nav><nav></nav></nav>