0

estoy teniendo un inconveniente con una page de ngx-admin creada por mi. He creado un div fijo, que no se mueve a modo de encabezado, para que cuando el usuario scrolea ese div quede siempre a tope y asi siempre se vea la informacion de mi tramite. Hasta aca todo bien. El inconveniente se plantea cuando el usuario expande el menú lateral izquierdo. Toda la parte de la page responde bien, excepto el div fijo que puse yo arriba. Les dejo la siguiente imagen, donde se muestra cuando todo se ve lindo.

introducir la descripción de la imagen aquí

Cuando yo expando el menú lateral izquierdo, sucede esto:

introducir la descripción de la imagen aquí

El css del div superior es el siguiente:

.superior {
    position: fixed;
    z-index: 100;
    background: #f1f5f8;
    width: 92%;
    height: 200px;
    top: 3rem;
    border-bottom: $rojo-claro dotted 1px;
}

La verdad es que soy muy novato con css y no encontré la forma de solucionarlo. Probé de quitarle el "width: 92%" y mejora, pero no cubre todo el ancho de la pantalla. Realmente no sé como decirle que si el menu está expandido, que el ancho sea otro. Otra cosa que intenté fue ponerle un z-index grande al menu lateral izquierdo, pero nunca me respondió ese intento. Espero me puedan dar una mano, es importantisimo que lo solucione. Si necesitan mas codigo, por favor me lo piden que edito y agrego. Gracias de antemano

2
  • Prueba a añadirle left: 0; al css
    – Dhaix
    Commented el 30 sept. 2019 a las 8:32
  • sucede que al ponerle Left: 0 al css ese div superior tapa al menú lateral izquierdo. Commented el 30 sept. 2019 a las 13:42

1 respuesta 1

0

la solucion que le encontré fue ponerlo como sticky con left 0. Quedó asi y funciona bien:

.superior {
    position: sticky;
    z-index: 100;
    background: #f1f5f8;
    width: 92%;
    height: 200px;
    top: 3rem;
    border-bottom: $rojo-claro dotted 1px;
    left: 0;
}

Espero le sirva a alguien.

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.