Lo que quiero lograr es que cuando den clic dentro del menú de navegación en un enlace desaparezca ya que dan clic y el menú sigue en pantalla soy principiante en javascript y jquery he tomado algunos cursos pero todavía se me dificulta.
Con el código que les dejo me funciona en pantallas pequeñas pero una vez que se prueba en pantallas de escritorio al dar clic en un enlace desaparecen todos y eso no quiero alguna otra forma de hacerlo de antemano gracias…
Es un menú adaptable a pantallas pero si cuando se da clic en un enlace se sigue mostrando el menú en pantalla lo he modificado y funciona se oculta el menú, pero en pantallas de escritorio se sigue ocultando todo el menú del header al dar clic en un enlace y no quiero que siga ejecutando el código en pantallas de escritorio si quiero que se muestre el menú del header.
//MENU PRNCIPAL
$(document).ready(function() {
$('.menu-toggle, a').click(function() {
$('nav').toggleClass('active')
})
var btnmenu = $('#btn-menu'),
icono = $('#btn-menu .icono')
btnmenu.on('click', function(e) {
icono.toggleClass('icon-close');
icono.toggleClass('icon-bars');
});
});
//Este codigo esta de prueba
$(window).on('resize', function() {
if ($(this).width() > 800) {
$('a').off();
}
});
/* MENU NAVEGACION========== */
header {
position: fixed;
top: 0px;
left: 0px;
padding: 0px 20px;
background: #1A252D;
height: 60px;
width: 100%;
z-index: 999;
box-sizing: border-box;
}
header .logo {
display: none;
}
.logo_nav {
display: block;
height: 200px;
width: auto;
text-align: center;
margin-bottom: 20px;
}
.logo_nav img {
height: 100%;
width: auto;
}
header nav {
position: absolute;
width: 100%;
height: auto;
background: #2A3B47;
top: 60px;
left: -100%;
transition: 0.5s;
display: flex;
flex-direction: column;
}
header nav.active {
left: 0px;
}
header nav ul {
display: block;
text-align: center;
padding-left: 0px;
margin: 0px;
}
header nav ul li {
list-style: none;
letter-spacing: 3px;
}
header nav ul li a {
height: 60px;
line-height: 50px;
padding: 0px 15px;
font-family: 'OpenSans-Regular';
font-size: 14px;
color: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, .2);
text-decoration: none;
display: block;
height: 50px;
}
header nav ul li a:hover,
header nav ul li a.active {
color: #ffffff;
background: #2196f3;
}
.menu-toggle {
color: #ffffff;
float: right;
font-size: 24px;
line-height: 60px;
cursor: pointer;
display: block;
}
@media screen and (min-width:950px) {
header {
padding-left: 5%;
padding-right: 5%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
header .logo {
position: relative;
display: block;
height: 60px;
width: auto;
margin: 0px;
padding: 0px;
}
header .logo img {
height: 100%;
width: auto;
}
.logo_nav {
display: none;
}
header nav {
position: relative;
background: #1A252D;
width: auto;
flex-direction: row;
top: 0px;
height: 60px;
left: 100%;
transition: 0s;
}
header nav ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
header nav ul li a {
border-bottom: 0px;
height: 60px;
line-height: 60px;
}
.menu-toggle {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- MENU DE NAVEGACION========== -->
<header id="header" class="headroom">
<figure class="logo">
<img src="./img/cat-fish.png" alt="">
</figure>
<nav class="active">
<figure class="logo_nav">
<img src="img/Logo.png" alt="">
</figure>
<ul>
<li><a class="hvr-underline-from-center" class="active" href="#">INICIO</a></li>
<li><a class="hvr-underline-from-center" href="#two_box">SERVICIOS</a></li>
<li><a class="hvr-underline-from-center" href="#galeriaPeces">PECES</a></li>
<li><a class="hvr-underline-from-center" href="#alimentoPulga">ALIMENTOS VIVOS</a></li>
<li><a class="toggle" href="#">CONTACTO</a></li>
</ul>
</nav>
<div class="menu-toggle" id="btn-menu"><span class="icono icon-close"></span></div>
</header>