- Agregar posicionamiento estático a la barra de navegación.
- Tener instalado Visual Studio Code
- Saber que es responsive design
Recuerdas que la barra de navegación tenía un posicionamiento fijo en la parte superior aún y cuando estemos haciendo scroll. ¿Has notado que este comportamiento ya no está presente? ¿Puedes solucionarlo?
::TIP
Al ser este un caso común, Bootstrap tiene clases utilitarias que pueden ayudar a lograr este comportamiento. Revisa esta sección de navbar de la documentación para que te des una idea de qué podrías usar.
::
Posible solución
La clase fixed-top de Bootstrap nos ayuda a solucionar este problema:
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<!-- Contenido de la barra de navegación -->
</nav>Si bien nuestra barra se posiciona como queremos, al momento de hacer scroll nos
damos cuenta que no tiene un color de fondo porque el texto se mezcla con el
resto del contenido de la página. Para esto, podemos agregarle un color de fondo
a la clase .navbar que tenemos declarada en nuestros estilos:
.navbar {
background-color: #fffbf7;
text-align: center;
color: #025157;
font-weight: 500;
}