CSS

Componente Header: navegación, sticky y accesibilidad

Diseña cabeceras robustas con branding, navegación adaptable, estados sticky y foco visible para teclado.

¿Cuánto sabes de CSS?

📘 Teoría

Estructura recomendada

Marca, navegación principal y acciones en una jerarquía clara.

Usa <header> y dentro <nav> para identificar regiones semánticas.

Agrupa enlaces en listas y separa acciones (login, CTA) de la navegación primaria para facilitar escaneo.

Base semántica

<header class='site-header'>
  <a class='logo' href='/'>Marca</a>
  <nav aria-label='Principal'>
    <ul>
      <li><a href='#'>Cursos</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Contacto</a></li>
    </ul>
  </nav>
  <a class='cta' href='#'>Empieza</a>
</header>

Sticky header sin sobresaltos

Fija navegación con sombra y fondo para legibilidad.

Con position: sticky y top: 0 el header se mantiene visible durante el scroll dentro del flujo normal.

Añade fondo opaco o semitransparente y una línea/sombra para separar contenido al desplazarte.

Patrón sticky

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, white 90%, transparent);
  border-bottom: 1px solid #e2e8f0;
  backdrop-filter: blur(8px);
}