Tengo un problema porque creé la barra de navegación, que tiene la parte superior adhesiva y tiene algunos menús desplegables (y muchos botones en cada menú desplegable). Entonces, si la altura del dispositivo es demasiado pequeña, se recorta y puedo obtener botones que están más bajos. Necesito saber cómo agregar desplazamiento en esa barra de navegación.

En este momento funciona así (usando bootstrap 4.0) https://v4-alpha.getbootstrap.com/examples/navbar-top -fijado /

Y en bootstrap 3.3.7 fue más fácil y se ve así: https://getbootstrap.com/docs/3.3/examples/navbar-fixed -top /

Simplemente cambie la altura de las ventanas a 300px y verá el efecto. Necesito ayuda para agregar el desplazamiento a la barra de navegación colapsada con la parte superior adhesiva.

3
nightspite 16 feb. 2018 a las 22:42

2 respuestas

La mejor respuesta
.fixed-top {
  max-height: 100vh;
  overflow: auto;
}

... lo arregla. Sin embargo, crea otro problema menor: una barra de desplazamiento doble. Sin embargo, esto no es un problema en los móviles, porque la mayoría de los móviles solo muestran la barra de desplazamiento cuando se está utilizando. (Es solo un problema en los navegadores de escritorio, cuando lo estás probando con una ventana del navegador muy pequeña, en modo no móvil). Entonces, en la práctica, no es un problema :).

4
tao 16 feb. 2018 a las 19:49

Tengo mejores resultados con esto:

#nav_collapse {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch; // mobile safari
    max-height: 90vh;
}

Es casi la misma pero un poco más precisa.

1
Pablote 6 may. 2019 a las 09:10