Tema: No se oculta el menú (mobile)

[luis15155]

Buenas noches con todos.
Tengo un problema con una web que estoy diseñando.
Después de tiempo regreso al diseño y me doy con la sorpresa que todo ha cambiado.
A duras penas logré acabar con el diseño, pero la parte del menú lo recicle (Les dejo el link, tiene buenos menúes: https://www.cssscript.com/tag/toggle-menu/), el problema que tengo es el siguiente:
En la versión móvil el menú no se esconde (uso de un input) al hacer clic en "requisitos" (por ejemplo) y esto hace que en ancla no vaya a donde corresponde. Y justo es por el alto del menú.



Alguien me podría ayudar, les dejo la web que estoy trabajando. Trate de cambiar el código js pero afectó a la versión de escritorio y ya me di por vencido. 
De antemano, muy agradecido.
http://www.prestamas.pe

[Liamngls]

¿Y si usas la versión móvil de wordpress no te servirá? A través de algún plugin por ejemplo.

[luis15155]

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.



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Ú:

Código: [Seleccionar]

<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.

Código: [Seleccionar]

$(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:

Código: [Seleccionar]

<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.

[Liamngls]

A ver si te serviría algo así: https://stackoverflow.com/questions/35579569/hide-show-menu-onclick-javascript