Buenos días, tengo este código:
<script>
smoothScroll.init({
selector: '[data-scroll]', // Selector for links (must be a class, ID, data attribute, or element tag)
selectorHeader: null, // Selector for fixed headers (must be a valid CSS selector) [optional]
speed: 1500, // Integer. How fast to complete the scroll in milliseconds
easing: 'easeInOutCubic', // Easing pattern to use
offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
callback: function ( anchor, toggle ) {} // Function to run after scrolling
});
</script>
<script>
$(document).ready(function(){
$(".nav-link").click(function () {
$('.navbar-toggler').click();
});
});
</script>
<title>Turibamba</title>
<style>
html, body{
height: 100vh;
}
.slider-inicio{
background:url("imagenes/fondo1.jpg");
height: 100vh;
background-size: cover;
background-position: center;
}
.fondo-galeria1{
background:url("imagenes/back5.jpg");
height: 100vh;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<!-- Menú -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<a data-scroll class="navbar-brand" href="#inicio">
<img src="imagenes/logo.png" width="30px" height="30px" class="d-inline-block align-top" alt="Turibamba Ocio"/>Turibamba</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item active">
<a data-scroll class="nav-link" href="#inicio">Inicio</span></a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#cumpleaños">Cumpleaños</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#animaciones">Animaciones</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#despedidas">Despedidas</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#nosotras">Nosotras y el parque</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#galeria">Galería</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#tarifas">Tarifas</a>
</li>
<li class="nav-item">
<a data-scroll class="nav-link" href="#contacto">Contacto</a>
</li>
</ul>
</div>
</nav>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/smooth-scroll.min.js"></script>
</body>
</html>
Este script:
$(".nav-link").click(function () {
$('.navbar-toggler').click();
});
es para que cuando pulses en las tres rayitas que se ponen cuando el menú está escondido, desaparezca el menú. Pues bien, con bootstrap 3 me funciona perfecto y con bootstrap 4 no. Ya le he cambiado el navbar-toggle por navbar-toggler, pero ni aún así. Gracias.
