1

No entiendo exactamente el motivo por el que el menú desplegable no me funciona una vez que cambia a los estilos de móvil. Cuando la resolución baja de 730px se activa el diseño para móviles, sin embargo hasta que la resolución no llega a 430px no puedo pulsar sobre el icono para que el menú se despliegue.

El código HTML del botón:

<div class="boton_menu">
    <label class="fa fa-bars" for="boton"></label>
</div>

El código JS para el menú desplegable es el siguiente:

$('.boton_menu').click(function(){

    if(contador == 1){
        $('.menu').animate({
            left: '0'
        });
        contador = 0;
    } else {
        $('.menu').animate({
            left: '-100%'
        });
        contador = 1;
    }

});

Ni siquiera aparece la "mano" para pulsar, aunque tenga puesto cursor: pointer.

No se me ocurre absolutamente nada, el código JS está siempre disponible, y entiendo que una vez el icono esté disponible, siempre que pulse sobre el debería mostrarse le menú.

Si os sirve de ayuda, podéis hacer pruebas aquí: http://www.laxtore.com/index.php

Tengo otro problema con JS en el mismo menú, pero como tengo entendido que no se pueden formular 2 preguntas, abriré otra cuando pueda.

EDITO:

Me acabo de dar cuenta que en otra sección que tengo de la web, otro menú de navegación aparte del principal, los enlaces dejan de funcionar cuando las dimensiones de pantalla son inferiores a 430px, JUSTO a esa resolución. No entiendo qué está pasando, no tengo ningún estilo CSS aplicado a partir de esa resolución. Es la primera vez que me pasa esto y ya no sé ni qué mirar.

1 respuesta 1

0

A primera vista tiene algo que ver con la dimensión y el orden de los distintos elementos.

Opción 1

Si desactivas esto:

/* estilos.css */
@media screen and (max-width: 1110px)
    .header_derecha {
        width: 65%;
}

Se soluciona, pero no se de que forma afecta a la estructura, deberías probarlo.

Opción 2

Si le asignas al divque contiene el botón un z-index alto se soluciona también.

<style>
    .boton_menu { z-index: 3000; }
</style>

<div class="boton_menu">
    <label class="fa fa-bars" for="boton"></label>
</div>

Solo queda hacer las pruebas pertinentes a ver que solución viene mejor.

PD.: Si haces pruebas a fondo igual se soluciona cambiando el orden de los elementos.

3
  • Madre mía, había probado con z-index: 2000 y no me funcionaba. Hoy probando lo mismo a la primera. Supongo que de los nervios lo metería hasta mal. He optado por la segunda opción. ¡Muchas gracias!
    – user27826
    Commented el 11 jun. 2017 a las 11:52
  • @JetLagFox Ten e cuenta que a veces no refresca la cache del documento o de los archivos enlazados y no muestra los cambios, lo cual no quiere decir que el cambio era erróneo, pero no muestra el resultado. Me ha pasado en más de una ocasión a pesar de saberlo...
    – OscarR
    Commented el 11 jun. 2017 a las 11:56
  • Gracias de todas formas, me estaba volviendo loco.
    – user27826
    Commented el 11 jun. 2017 a las 12:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.