Question

Muy buenas, tengo un problema con el menú de wordpress de una web, ya que en la versión responsive (con el menú movil) no se retrae.

Se trata de un menú con enlaces personalizados (anchor), que navega por una única página en la que el menú hace scroll a diferentes elementos.

En la versión de PC y con todos los navegadores funciona bien, pero con la versión móvil no, porque a pesar de que si te lleva al elemento, el menú sigue "visible" hasta que lo cierras manualmente

He probado a añadir en el menú más páginas y ahí si funciona bien

El menú tiene activada la opción de mantener siempre visible ( si lo quito, ya no está a la vista, pero si subes hasta el inicio, el menú movil aparece desplegado igualmente.

He probado a instalar varios plugins para cambiar el menú, pero con la mayoria de los famosetes, en el movil directamente no aparece el menú cuando tocas en el icono del mismo.

Dejo el link a la web
https://mimasajistaenvalladolid.es/

Y una captura de la versión móvil, el boton blanco es el de wordpress y el morado el que he apañado yo de forma provisional

https://ibb.co/58HC6TD

Para salir del paso he instalado el plugin "responsive menu" que si me genera un menú adecuado en la versión movil y no "interfiere" en la versión pc. El cual ME SUPERPONE su boton del menú al propio de wordpress y de puñetera casualidad no se ve!!!

De todas formas lo dejaré desplazado para que se vean ambos y podáis echar un vistazo

No soy programador, pero me apaño para leer codigo e insertar algo

Muchas gracias!!

Comments

Seguramente con un pequeño JavaScript lo puedas solucionar, pero sin ver la web y su código, difícil ayudarte. Edita tu pregunta y pon el enlace a la web para ver cómo esta hecho.

Saludos.

---

Ya lo he actualizado, gracias por responder ;)

Answer 1

Viendo el demo del tema en la web del desarrollador (por lo menos en uno de los demos, no sé cuál tengas tú), el menú tampoco sirve, así es que el tema esta mal, no sé si exista alguna versión nueva para descargar que arregle eso y que versión tienes. Entonces vamos un poco a ciegas sin poder ver más del tema.

Podrías arreglarlo agregando un javascript que ejecute el toggle que ya ejecuta cuando le das a cerrar, pero vas a tener que modificar el tema, que no sé qué opciones tenga en la administración para los menús, si vienen separados o debería de ser el mismo o bien, si modificaste el código del menú principal.

El div class="aux-toggle-menu-bar" se cambia de height: auto; a height: 0px; cuándo le das a la X según puedo ver en el código actual.

Es cosa de que tu javascript haga lo mismo pero al darle click a los elemento del menú.

También hay versión PRO de ese tema, no sé cuál tengas tú y en que demo te estás basando. Esto te lo comento sin poder ver todo el código del tema y sus opciones.

Sin embargo, como lo tienes ahorita con dos menús también es correcto, solo tendrías que ocultar el menú principal (que es para escritorio) y dejar únicamente el segundo menú (que es para móvil) utilizando media queries.

Ejemplo:

1- div id="nav-burger" (menú escritorio)

@media only screen and (max-width: 600px) {
  div#nav-burger {
    display: none;
  }
}

2- button id="responsive-menu-pro-button" (menú móvil)
En tu CSS ya tienes:

@media screen and (max-width: 8000px)
button#responsive-menu-pro-button {
    width: 55px;
    height: 55px;
    position: fixed;
    top: 75px;
    right: 5%;
    display: inline-block;
    transition: transform 0.5s, background-color 0.5s;
    background: rgba(93, 12, 139, 1);
}

Cambia el top por 15px.

Con eso te funcionaría exactamente como quieres, se utilizaría el menú de escritorio en pantallas grandes y el móvil en pequeñas.

A ver si alguien más recomienda otra opción.

Y ya como duda. ¿Nunca ha funcionado ese menú o sucedió después de que modificaras algo?

Saludos.