Dar estilos a un header que ya fue maquetado es uno de los pasos más importantes para definir la identidad visual de un proyecto web. Aquí se trabaja con Materialize CSS, su sistema de display flex por defecto y las clases helper que facilitan el posicionamiento de elementos como el logo y la barra de navegación, hasta llegar a la imagen de fondo que completa la sección del banner.
¿Cómo configura Materialize el display flex en el body?
Antes de tocar cualquier componente, es fundamental entender que Materialize trabaja con display flex por defecto [0:27]. Esto se puede confirmar revisando la documentación del footer en la sección de componentes, donde se muestra el código base que el framework utiliza para posicionar elementos.
Para aprovechar esta característica, el body recibe estos estilos iniciales:
margin: 0 y padding: 0 para resetear los valores que el navegador aplica por defecto.display: flex para mantener coherencia con Materialize.min-height: 100vh para que el cuerpo ocupe al menos toda la altura del viewport.flex-direction: column para apilar los contenedores principales en columna [1:07].
Este reset y configuración inicial garantizan que el footer se posicione correctamente al fondo y que los contenedores principales se comporten de forma predecible.
¿Cómo se estiliza el nav y el logo del header?
El header recibe un height: 500px para delimitar su crecimiento total [1:26]. Dentro de él, el nav se configura con height: 100px, background: white y un box-shadow: none [1:46]. Quitar la sombra es intencional: el nav de Materialize trae un shadow por defecto en el borde que lo hace visible, y en este diseño se necesita que el contenedor pase desapercibido.
Para el logo se utiliza la clase .brand-logo que proporciona Materialize. Al intentar modificar su altura directamente, los estilos no siempre se aplican porque se están pisando los estilos del framework [2:52]. La solución es ajustar la propiedad left: 15% para reposicionar el logo y después apuntar a la imagen con nav .brand-logo img asignándole un width: 52px [3:25].
El class container de Materialize, que forma parte de su sistema de grid, delimita el ancho del contenido visible. Todo lo que exista dentro de la nav vivirá dentro de ese contenedor [3:46].
¿Cómo posicionar la barra de navegación a la derecha?
La lista ul que contiene los enlaces de navegación necesita dos ajustes:
- Un
height: 100px para igualar la altura del nav [4:20].
- Color gris en los enlaces con
color: gray para hacerlos visibles sobre fondo blanco [4:36].
Para mover la lista al lado derecho se utiliza una clase helper de Materialize directamente en el HTML [5:16]. Y para centrar verticalmente el contenido dentro de su padre, se aplica otra clase helper que alinea los elementos de forma horizontal [5:30]. Durante este proceso apareció un typo en el nombre de la clase que impedía su funcionamiento; al corregirlo, los elementos se alinearon automáticamente [5:55].
¿Cómo agregar una imagen de fondo con background image en CSS?
Debajo del nav existe un section con la clase header-main-pic destinada a mostrar la imagen de banner. Esta imagen debe estar previamente guardada en la carpeta assets/img/ del proyecto [6:30].
La configuración CSS de esta sección incluye:
width: 100% para ocupar todo el ancho disponible.height: 400px para delimitar la altura del banner.background-image: url('ruta') donde la ruta utiliza ../ para subir un nivel de carpeta y luego acceder a assets/img/nombre-imagen [7:05].
¿Cómo centrar y ajustar la imagen de fondo?
Una vez cargada, la imagen necesita tres propiedades adicionales para verse correctamente [7:35]:
background-repeat: no-repeat evita que la imagen se repita.background-position: center centra la imagen dentro del contenedor.background-size: cover hace que la imagen cubra todo el espacio disponible sin distorsionarse.
Con background-size cover, la imagen se adapta al tamaño del contenedor y, al crecer la ventana, muestra más área de la fotografía manteniendo siempre una composición limpia [8:07].
El resultado final es un header compuesto por un nav transparente con logo a la izquierda y barra de navegación a la derecha, más una imagen de banner centrada que ocupa toda la sección inferior. Si estás construyendo tu propio proyecto con Materialize, comparte cómo personalizaste tu header y qué clases helper te resultaron más útiles.
