Hola a todos tengo un inconveniente, tengo un menú que al hacerse responsivo no logro hacer que al darle click a sus enlaces se vuelva a plegar el menú y la página se deslice hasta la opción seleccionada como cuando lo hace en modo escritorio. Dejo el código por si alguien se anima a dame una mano. Saludos
<nav class="site-navigation text-right" role="navigation">
<div class="container">
<div class="d-inline-block d-lg-none ml-md-0 mr-auto py-3"><a href="#" class="site-menu-toggle js-menu-toggle text-white"><span class="icon-menu h3"></span></a></div>
<ul class="site-menu js-clone-nav d-none d-lg-block">
<li class="active">
<a class="js-scroll-trigger" href="jofret.com">Inicio</a>
</li>
<li><a class="js-scroll-trigger" href="#contactenos">Contáctenos</a></li>
<li><a class="js-scroll-trigger" href="#nosotros">Nosotros</a></li>
<li><a class="js-scroll-trigger" href="#productos">Productos</a></li>
<!--li class="has-children">
<a href="#">Productos</a>
<ul class="dropdown arrow-top">
<li><a href="#">Menu One</a></li>
<li><a href="#">Menu Two</a></li>
<li><a href="#">Menu Three</a></li>
</ul>
</li-->
<li><a class="js-scroll-trigger" href="#">Servicios</a></li>
</ul>
</div>
</nav>
Dejaré tambien todo el codigo js
jQuery(document).ready(function($) {
"use strict";
var siteMenuClone = function() {
$('.js-clone-nav').each(function() {
var $this = $(this);
$this.clone().attr('class', 'site-nav-wrap').appendTo('.site-mobile-menu-body');
});
setTimeout(function() {
var counter = 0;
$('.site-mobile-menu .has-children').each(function(){
var $this = $(this);
$this.prepend('<span class="arrow-collapse collapsed">');
$this.find('.arrow-collapse').attr({
'data-toggle' : 'collapse',
'data-target' : '#collapseItem' + counter,
});
$this.find('> ul').attr({
'class' : 'collapse',
'id' : 'collapseItem' + counter,
});
counter++;
});
}, 1000);
$('body').on('click', '.arrow-collapse', function(e) {
var $this = $(this);
if ( $this.closest('li').find('.collapse').hasClass('show') ) {
$this.removeClass('active');
} else {
$this.addClass('active');
}
e.preventDefault();
});
$(window).resize(function() {
var $this = $(this),
w = $this.width();
if ( w > 768 ) {
if ( $('body').hasClass('offcanvas-menu') ) {
$('body').removeClass('offcanvas-menu');
}
}
})
$('body').on('click', '.js-menu-toggle', function(e) {
var $this = $(this);
e.preventDefault();
if ( $('body').hasClass('offcanvas-menu') ) {
$('body').removeClass('offcanvas-menu');
$this.removeClass('active');
} else {
$('body').addClass('offcanvas-menu');
$this.addClass('active');
}
})
// click outisde offcanvas
$(document).mouseup(function(e) {
var container = $(".site-mobile-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ( $('body').hasClass('offcanvas-menu') ) {
$('body').removeClass('offcanvas-menu');
}
}
});
};
siteMenuClone();
var sitePlusMinus = function() {
$('.js-btn-minus').on('click', function(e){
e.preventDefault();
if ( $(this).closest('.input-group').find('.form-control').val() != 0 ) {
$(this).closest('.input-group').find('.form-control').val(parseInt($(this).closest('.input-group').find('.form-control').val()) - 1);
} else {
$(this).closest('.input-group').find('.form-control').val(parseInt(0));
}
});
$('.js-btn-plus').on('click', function(e){
e.preventDefault();
$(this).closest('.input-group').find('.form-control').val(parseInt($(this).closest('.input-group').find('.form-control').val()) + 1);
});
};
// sitePlusMinus();
var siteSliderRange = function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
};
// siteSliderRange();
var siteMagnificPopup = function() {
$('.image-popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
};
siteMagnificPopup();
/*var siteCarousel = function () {
if ( $('.nonloop-block-13').length > 0 ) {
$('.nonloop-block-13').owlCarousel({
center: false,
items: 1,
loop: false,
stagePadding: 0,
margin: 20,
nav: true,
navText: ['<span class="icon-arrow_back">', '<span class="icon-arrow_forward">'],
responsive:{
600:{
margin: 0,
stagePadding: 10,
items: 2
},
1000:{
margin: 0,
stagePadding: 0,
items: 2
},
1200:{
margin: 0,
stagePadding: 0,
items: 3
}
}
});
}
$('.nonloop-block-13').owlCarousel({
center: false,
items: 1,
loop: true,
autoplay: true,
stagePadding: 0,
margin: 20,
nav: true,
navText: ['<span class="icon-arrow_back">', '<span class="icon-arrow_forward">'],
responsive:{
600:{
margin: 0,
stagePadding: 0,
items: 2
},
1000:{
margin: 0,
stagePadding: 0,
items: 2
},
1200:{
margin: 0,
stagePadding: 0,
items: 3
}
}
});
if ( $('.slide-one-item').length > 0 ) {
$('.slide-one-item').owlCarousel({
center: false,
items: 1,
loop: true,
stagePadding: 0,
margin: 0,
autoplay: true,
pauseOnHover: false,
nav: true,
navText: ['<span class="icon-arrow_back">', '<span class="icon-arrow_forward">']
});
}
};
siteCarousel();
*/
var siteStellar = function() {
$(window).stellar({
responsive: false,
parallaxBackgrounds: true,
parallaxElements: true,
horizontalScrolling: false,
hideDistantElements: false,
scrollProperty: 'scroll'
});
};
siteStellar();
var siteCountDown = function() {
if ( $('#date-countdown').length > 0 ) {
$('#date-countdown').countdown('2020/10/10', function(event) {
var $this = $(this).html(event.strftime(''
+ '<span class="countdown-block"><span class="label">%w</span> weeks </span>'
+ '<span class="countdown-block"><span class="label">%d</span> days </span>'
+ '<span class="countdown-block"><span class="label">%H</span> hr </span>'
+ '<span class="countdown-block"><span class="label">%M</span> min </span>'
+ '<span class="countdown-block"><span class="label">%S</span> sec</span>'));
});
}
};
siteCountDown();
var siteDatePicker = function() {
if ( $('.datepicker').length > 0 ) {
$('.datepicker').datepicker();
}
};
siteDatePicker();
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 72)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function() {
$('.site-mobile-menu').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 75
});
});
Saludos cordiales