Muchas gracias por tomarte el tiempo de responder Liamngls.
Probé con varios plugins (3) en total, pero me cambian el diseño de la web y eso es lo que no quiero.
El problema radica básicamente en lo siguiente:
En la versión móvil (<750px) el estado de reposo del menú es la figura de la izquierda y al hacerle clic cambia tal cual la imagen de la derecha.
![](https://image.ibb.co/hz6vkc/MENU.jpg)
El tema es que al hacer desplegarse el menú la flecha debe de cambiar hacía arriba (efecto onclick en javascript) y al darle clic en cualquiera de las opciones que se muestran antes de ir al ancla debe de ocultar el menú y regresa a su reposo (imagen de la izquierda) y luego ir al ancla.
He probado con varias códigos JS que sugieren pero creo que hace conflicto con el que utilicé para fijar el menú en la parte superior.
Los códigos son los siguientes:
CÓDIGO DEL MENÚ:
<nav class="menu-pega">
<input type="checkbox" id="checkbox-demo">
<label for="checkbox-demo">
<ul id="porfavor" class="menu demo">
<li><a href="#pag2" data-scroll=""><span class="boton1">REQUISITO</span></a></li>
<li><a href="#pag3" data-scroll=""><span class="boton2">CÓMO FUNCIONA</span></a></li>
<li><a href="#pag4" data-scroll=""><span class="boton3">BENEFICIOS</span></a></li>
<li><a href="#pag5" data-scroll=""><span class="boton4">TESTIMONIOS</span></a></li>
<li><a href="#pag6" data-scroll=""><span class="boton2">NOSOTROS</span></a></li>
<li><a class="boton" href="#popup1"><span class="boton2">CONTÁCTANOS</span></a></li>
</ul>
<span id="enlaces" class="toggle"> MENÚ <i class="icono icon-abajo"></i></span>
</label>
</nav>
Al hacer clic en
ID="enlaces" debe de cambiar por otra clase: icon-arriba. Creo que se debe de usar:
toggleClass('icon-arriba');.
El JS que utilicé para fijar el menú es el siguiente:
Lo guardo en un directorio JS dentro del servidor.
$(document).ready(function(){
var altura = $('.menu-pega').offset().top;
$(window).on('scroll', function(){
if ( $(window).scrollTop() > altura ){
$('.menu-pega').addClass('posicion-fija');
} else {
$('.menu-pega').removeClass('posicion-fija');
}
});
});
Y el otro código JS para suavizar el scroll que van dentro del archivo index.php es el siguiente:
<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: 1000, // 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>
Todos los JS son reciclados por no conozco mucho del tema.
Muchas gracias por su apoyo.
Saludos.