Header sticky con logo, links de navegación y botón de acción. Listo para copiar y personalizar.
Descripción
El Header básico es la barra de navegación de arriba de todo. Es lo primero que ve alguien al entrar a tu sitio.
Muestra tres cosas en una sola fila: el logo o nombre del sitio, los links de navegación principales y un botón de acción. Simple y directo.
Usa una propiedad CSS llamada position:sticky. Esto hace que el header se quede pegado arriba de la pantalla aunque el usuario haga scroll hacia abajo. Así siempre tiene a mano los links y el botón, sin tener que volver arriba de todo.
Por dentro, el header usa flexbox (una forma de acomodar elementos en fila o columna que se ajusta sola al espacio disponible). Gracias a esto, el logo queda a la izquierda, la navegación ocupa el centro y el botón queda empujado a la derecha, todo automático.
Los colores del header están guardados en variables CSS (valores que definís una sola vez y reutilizás en todo el archivo, como --header-bg). Así, para cambiar el fondo, el texto, el color de acento o la altura, solo tocás esas variables — no hace falta tocar nada más.
Los links de navegación tienen un estado hover (lo que pasa cuando pasás el mouse por encima): cambian de color y aparece un fondo semitransparente. Es un aviso visual suave de que ese link se puede clickear.
Esa animación de hover dura 0.15 segundos, así que se siente rápida e inmediata, sin demora que se note.
El botón de la derecha es el botón para que el usuario haga algo (por ejemplo "Empezar"). Usa el color de acento definido en las variables y al pasarle el mouse se pone un poco más transparente. Podés cambiarle el texto, el color y el link de destino.
El contenido interno del header no se estira más de 1200 píxeles de ancho y queda centrado. Así, en pantallas muy anchas, todo se ve prolijo y no queda estirado de más.
En celulares de hasta 640 píxeles de ancho, la navegación y el botón se ocultan solos para que no se corte nada horizontalmente. Si necesitás un menú hamburguesa (el ícono de tres rayitas que despliega un menú) para celular, existe el módulo "Header móvil" de Kodeval Pages que agrega esa función.
Este componente no usa JavaScript ni librerías externas ni frameworks de CSS. Es solo HTML y CSS. Por eso es liviano, funciona en cualquier proyecto y es fácil de entender aunque estés empezando.
El header siempre queda por encima de todo el resto del contenido (gracias a una propiedad llamada z-index), incluso por encima de ventanas emergentes o menús desplegables. Y tiene una línea fina abajo (border-bottom) que marca dónde termina el header y empieza el resto de la página.
Para usar este módulo, pegá el código HTML donde quieras que aparezca el header (normalmente arriba de todo, dentro del <body>) y pegá el CSS dentro de tu archivo de estilos, o en una etiqueta <style> en el <head>. Necesitás tener también `base.css`, `fonts.css` y `layout.css` del proyecto para que se vea igual que en el ejemplo.
<header class="header">
<div class="header-inner">
<a href="/" class="logo">MiSitio</a>
<nav class="nav">
<a href="#">Inicio</a>
<a href="#">Servicios</a>
<a href="#">Blog</a>
<a href="#">Contacto</a>
</nav>
<a href="#" class="btn-header">Empezar →</a>
</div>
</header>
/*
|--------------------------------------------------------------------------
| Header Básico — Kodeval Pages
|--------------------------------------------------------------------------
| Header sticky con logo, navegación y botón de acción.
| 100% HTML y CSS puro. Sin JavaScript, sin dependencias.
|--------------------------------------------------------------------------
*/
/* =====================
VARIABLES
Cambiá estos valores para adaptar el header a tu proyecto.
===================== */
.header {
--header-bg: #0f172a;
--header-text: #f8fafc;
--header-muted: rgba(248,250,252,0.6);
--header-accent: #5865f2;
--header-height: 64px;
}
/* =====================
ESTRUCTURA PRINCIPAL
position:sticky mantiene el header visible al hacer scroll.
Cambiá a position:fixed si preferís que siempre esté sobre el contenido.
===================== */
.header {
background: var(--header-bg);
height: var(--header-height);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* =====================
CONTENEDOR INTERNO
Centra el contenido y distribuye logo, nav y botón.
===================== */
.header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
height: 100%;
display: flex;
align-items: center;
gap: 2rem;
}
/* =====================
LOGO
===================== */
.logo {
font-size: 1.1rem;
font-weight: 700;
color: var(--header-accent);
text-decoration: none;
letter-spacing: -0.02em;
flex-shrink: 0;
}
/* =====================
NAVEGACIÓN
flex-grow:1 hace que el nav empuje el botón hacia la derecha.
===================== */
.nav {
display: flex;
align-items: center;
gap: 0.25rem;
flex-grow: 1;
}
.nav a {
color: var(--header-muted);
text-decoration: none;
font-size: 0.9rem;
padding: 0.4rem 0.75rem;
border-radius: 8px;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
}
.nav a:hover {
color: var(--header-text);
background: rgba(255,255,255,0.06);
}
/* =====================
BOTÓN DE ACCIÓN
Se ubica en el extremo derecho.
===================== */
.btn-header {
background: var(--header-accent);
color: #fff;
text-decoration: none;
padding: 0.5rem 1.1rem;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
transition: opacity 0.15s;
}
.btn-header:hover { opacity: 0.85; }
/* =====================
RESPONSIVE
En móvil ocultamos el nav y el botón para evitar overflow.
Para menú móvil completo, usá el módulo "Header móvil".
===================== */
@media (max-width: 640px) {
.nav { display: none; }
.btn-header { display: none; }
}