Si estás buscando una forma de darle un toque moderno y funcional a tu sitio web, una cabecera en forma de barra lateral fija puede ser la solución ideal. Este tipo de diseño no solo permite que la navegación esté siempre visible, sino que también ahorra espacio en el contenido principal. A continuación, te mostraremos cómo lograrlo con CSS de manera simple y eficaz.
CODIGO CSS
.header-bar {
bottom: 0;
box-shadow: 0 3px 12px 0 #0000008d;
display: flex;
flex-direction: column;
font-size: 14px;
justify-content: space-between;
left: 0;
position: fixed;
top: 0;
width: 80px;
z-index: 800;
}
body{
padding-left:79px
}
NOTA
Cambiá la clase por la que estés usando en tu cabecera
Podés agregarle un padding-left al body para que todo tu contenido se ajuste al ancho de la cabecera.
