Un encabezado fijo en WordPress (también llamado sticky header) es esa barra superior con tu logo y tu menú que permanece siempre visible mientras el visitante baja por la página. Es un detalle pequeño que mejora mucho la navegación: el menú está siempre a un clic, sin importar cuánto haya bajado la persona. Montar un encabezado fijo WordPress es más simple de lo que crees.

En esta guía te explicamos, paso a paso, tres formas de lograrlo: usando las opciones de tu propio tema, con un plugin sin tocar código, o con un poco de CSS personalizado. Elige la que mejor se adapte a tu nivel y a tu sitio, y en pocos minutos tu encabezado quedará fijo.

Lo que verás en esta guía

• ¿Qué es un encabezado fijo (sticky header)?
• ¿Por qué usar un encabezado fijo?
• Opción 1: con las opciones de tu tema
• Opción 2: con un plugin
• Opción 3: con CSS personalizado
• Buenas prácticas para tu encabezado fijo WordPress
• Errores comunes
• En resumen
• Preguntas frecuentes

¿Qué es un encabezado fijo (sticky header)?

El encabezado (o header) es la zona superior de tu web, donde normalmente están el logo y el menú de navegación. En un encabezado normal, esa barra se queda arriba y desaparece de la vista cuando el usuario baja. En un encabezado fijo, en cambio, la barra se “pega” a la parte de arriba de la pantalla y acompaña al visitante durante todo el recorrido.

Es una técnica muy usada porque mantiene siempre accesibles los elementos importantes: el menú, el buscador o un botón de contacto. El usuario nunca tiene que volver arriba para navegar a otra sección.

¿Por qué usar un encabezado fijo en WordPress?

Poner el encabezado fijo no es solo estético; tiene beneficios concretos para la experiencia y las conversiones:

• Navegación más fácil: el menú está siempre disponible, sin necesidad de subir de nuevo.
• Más clics a secciones clave: tu botón de contacto o de compra queda siempre a la vista.
• Refuerza tu marca: el logo permanece presente durante toda la visita.
• Mejor en móviles: en pantallas pequeñas, tener el menú siempre accesible se agradece mucho.
• Sensación de sitio moderno: es un estándar de diseño que los usuarios ya esperan.

Eso sí, un sticky header suma peticiones y estilos; si tu sitio ya va lento, notarás cualquier detalle de más. Alojar WordPress en un hosting optimizado para WordPress ayuda a que estos ajustes de diseño no penalicen la velocidad.

Opción 1: con las opciones de tu tema

Es la forma más sencilla y recomendada, porque muchos temas modernos ya incluyen el encabezado fijo como una opción integrada. No necesitas plugins ni código.

Paso 1: entra al Personalizador

En tu escritorio de WordPress ve a Apariencia > Personalizar. Si usas un tema de bloques, puede llamarse Editor.

Paso 2: busca las opciones del encabezado

Abre la sección de Encabezado o Cabecera. Busca una casilla con un nombre como “Encabezado fijo”, “Sticky header” o “Fijar al hacer scroll”.

Paso 3: actívalo y guarda

Marca la opción, ajusta si quieres el comportamiento (por ejemplo, que se encoja al bajar) y guarda los cambios. Comprueba el resultado en el sitio real.

Resumido en pasos, con un tema compatible el proceso es este:

1. Ve a Apariencia > Personalizar (o Editor).
2. Abre la sección Encabezado / Cabecera.
3. Activa la opción de encabezado fijo o sticky.
4. Guarda los cambios y revisa el sitio en escritorio y móvil.

Opción 2: con un plugin

Si tu tema no trae la opción, un plugin especializado en encabezados fijos la añade sin que toques código. Busca en el repositorio de plugins un “sticky header” bien valorado y actualizado.

Paso 1: instala y activa el plugin

Ve a Plugins > Añadir nuevo, busca un plugin de sticky header, instálalo y actívalo.

Paso 2: selecciona el elemento a fijar

En los ajustes del plugin, indica qué parte de tu web debe quedar fija (normalmente el encabezado o el menú). Algunos plugins te piden un identificador CSS; otros lo detectan solos.

Paso 3: ajusta y prueba

Configura opciones como el margen superior o la sombra, guarda y prueba en distintos dispositivos para asegurarte de que no tape contenido.

Opción 3: con CSS personalizado

Si te sientes cómodo con el código, unas pocas líneas de CSS logran el efecto. En Apariencia > Personalizar > CSS adicional, apunta al selector de tu encabezado (por ejemplo, .site-header) y aplícale position: sticky; top: 0; z-index: 999;. Ajusta el selector al de tu tema y verifica que no se solape con otros elementos.

Esta opción es la más flexible, pero también la que más cuidado exige: si el selector no es el correcto o el z-index es bajo, el efecto puede no funcionar o quedar por debajo de otros bloques.

Buenas prácticas para tu encabezado fijo WordPress

• Mantenlo bajo: un encabezado alto que se queda fijo roba demasiado espacio, sobre todo en móviles.
• Considera que se encoja: muchos temas reducen el header al bajar, para ocupar menos.
• Cuida el contraste: el menú debe leerse bien sobre cualquier contenido que quede detrás.
• Revisa el móvil: comprueba que no tape botones ni el contenido al hacer scroll.
• No lo llenes de elementos: logo, menú y a lo sumo un botón; nada más.

Errores comunes

• Un encabezado demasiado alto: reduce el área útil y molesta en pantallas pequeñas.
• Olvidar el z-index: sin él, otros elementos pueden quedar por encima del header.
• No probar en móvil: lo que se ve bien en el ordenador puede tapar contenido en el teléfono.
• Usar varias soluciones a la vez: tema y plugin activando lo mismo genera conflictos.
• Descuidar la velocidad: plugins pesados o mal hechos pueden ralentizar el sitio.

En resumen

Crear un encabezado fijo en WordPress es más fácil de lo que parece. Prueba primero las opciones de tu tema; si no las tiene, recurre a un plugin de sticky header; y si dominas el código, unas líneas de CSS te dan control total. Sea cual sea el camino, manténlo bajo, cuida el contraste y pruébalo en móvil. Así tu menú estará siempre a mano y tu sitio se sentirá más moderno y cómodo de navegar.

¿Tu WordPress carga rápido con todos tus ajustes?
Hosting WordPress con NVMe, SSL gratis y actualizaciones gestionadas para que todo vuele.
Ver planes WordPress →

Preguntas frecuentes