En WordPress, cuando un usuario con sesión activa ve el sitio hay una barra de administración (admin bar) que se sitúa en la parte superior de la página. Si tu cabecera (header) está posicionada como fixed o sticky, esa barra puede hacer que la cabecera salte o se superponga de forma indeseada al cargar la página o al hacer scroll. Este tutorial explica en detalle por qué ocurre ese comportamiento y varias soluciones seguras y modernas usando CSS calc() (y alternativas con variables CSS y un pequeño script si es necesario) para evitar el salto y lograr un resultado estable y compatible en dispositivos móviles y con las zonas seguras (safe-area) de iOS.

Por qué salta el header cuando existe la admin bar

La clase body.admin-bar se añade automáticamente por WordPress cuando el toolbar está activo. Sin embargo, la altura de la barra de administración varía según el dispositivo: en escritorio suele ser 32px y en pantallas pequeñas (modo táctil) 46px. Si tu header está fijado con position: fixed y no tiene en cuenta esa altura, al cargar la página o al alternar la barra puede producirse un reflujo o un salto visual al ajustarse la posición. Además, si no manejas las zonas seguras (safe-area-inset-top) en iPhone con notch, el resultado puede ser incorrecto en dispositivos con muesca.

Casos comunes donde ocurre el problema

• Cabecera con position: fixed top: 0 — se queda detrás de la admin bar o salta al añadirse el espacio.
• Cabecera sticky que cambia comportamiento en scroll y no considera la admin bar.
• Animaciones o transiciones mal configuradas que muestran el salto en lugar de colocarlo correctamente desde el inicio.

Solución simple con CSS y calc()

La idea central es usar el selector body.admin-bar para aplicar un desplazamiento superior al header mediante top: calc(…). También conviene considerar env(safe-area-inset-top) para iOS y una media query para ajustar la altura en móviles.

Ejemplo mínimo (ajusta el selector .site-header al de tu tema):

body.admin-bar .site-header {
  position: fixed / o sticky según tu implementación /
  left: 0
  right: 0
  top: calc(32px   env(safe-area-inset-top))
  z-index: 9999
}
@media screen and (max-width: 782px) {
  / En móviles la admin bar es más alta /
  body.admin-bar .site-header {
    top: calc(46px   env(safe-area-inset-top))
  }
}

Por qué funciona

Usando calc() sumamos la altura conocida de la admin bar (32px / 46px) y la zona segura superior si existe. De este modo el header se coloca desde el primer render en la posición correcta y no hay salto visual.

Mejor: usar variables CSS para mantenerlo mantenible

Si prefieres mantenimiento más sencillo, define una variable CSS que represente la altura de la admin bar y cámbiala con una media query.

:root {
  --wp-adminbar-height: 32px
}

@media screen and (max-width: 782px) {
  :root {
    --wp-adminbar-height: 46px
  }
}

/ Aplicación /
body.admin-bar .site-header {
  position: fixed
  top: calc(var(--wp-adminbar-height)   env(safe-area-inset-top))
  left: 0
  right: 0
  z-index: 9999
}

Consideraciones extra para evitar efectos visuales no deseados

• Transiciones: Si pones una transición en top puede producir una animación en el momento del ajuste que parezca un salto. Para evitarlo pon la posición correcta desde el primer render o usa una transición solo para cambios intencionados:

/ Evitar animar el top al cargar /
.site-header {
  transition: none / o controlar con una clase concreta /
}

• Z-index: Asegúrate de que la admin bar (por defecto z-index: 99999) y tu cabecera tengan z-index coherentes para que la barra no quede debajo si no quieres que se superponga.
• Admin bar abajo: El toolbar puede situarse abajo en la pantalla solo aplica estos cambios si la barra está arriba (body.admin-bar es la clase que indica sólo su presencia, no la posición). La mayoría de instalaciones usan la barra superior por defecto.
• Sticky vs Fixed: position: sticky respeta el flujo hasta que alcanza el top, y también acepta top con calc si tienes problemas con fixed, prueba sticky si tu diseño lo permite.

Detectar dinámicamente la altura de la admin bar con JavaScript (fallback si la barra cambia)

Si usas plugins que modifican el tamaño o añadidos que cambian la altura, puedes calcular la altura real del elemento #wpadminbar y definir una variable CSS en runtime. Así no dependes de un valor fijo.

(function(){
  var adminBar = document.getElementById(wpadminbar)
  if (!adminBar) return
  var h = adminBar.offsetHeight   px
  document.documentElement.style.setProperty(--wp-adminbar-height, h)
})()

Con ese script, combina con la regla CSS de más arriba y elimina las media queries fijas si prefieres que sea totalmente dinámico:

:root { --wp-adminbar-height: 32px } / valor por defecto /
body.admin-bar .site-header {
  top: calc(var(--wp-adminbar-height)   env(safe-area-inset-top))
}

Agregar el CSS al tema (formas recomendadas en WordPress)

1. Si tu tema tiene un panel de CSS adicional, pega el CSS final ahí.
2. Si trabajas en un child theme, añade el CSS en el archivo style.css del child theme.
3. Para inyectar dinamismo (JS) añádelo en un archivo .js que enqueues en front-end con wp_enqueue_script, o imprime el script en footer con seguridad.

Ejemplo básico de cómo encolar un script para establecer la variable CSS desde functions.php:

add_action(wp_enqueue_scripts, function() {
  wp_enqueue_script(theme-adminbar-height, get_stylesheet_directory_uri() . /js/adminbar-height.js, array(), null, true)
})

Pequeña tabla resumen de alturas típicas

Dispositivo / situación	Altura típica
Escritorio	32px
Mobile / táctil (ancho ≤ 782px)	46px
iPhone con notch	32px env(safe-area-inset-top)

Checklist práctico paso a paso

1. Identifica el selector de tu header (.site-header, header.site, .main-header, etc.).
2. Aplica position: fixed o sticky si tu diseño lo necesita.
3. Añade la regla para body.admin-bar usando calc() para sumar la altura de la admin bar.
4. Incluye env(safe-area-inset-top) para soportar notches en iOS.
5. Si quieres máxima fiabilidad ante plugins que cambien la barra, añade el pequeño script que calcula la altura real y la asigna a una variable CSS.
6. Revisa z-index y elimina transiciones que animen el top al cargar.
7. Prueba en escritorio, móvil y en un iPhone con notch.

Notas finales y recomendaciones

• Prefiere CSS puro siempre que sea posible usa JavaScript solo si hay variabilidad real en la altura del admin bar que no puedas predecir.
• Comprueba que el selector de tu header engloba todo el contenedor que debe desplazarse. Algunos temas tienen múltiples elementos (cabecera superior, barra de navegación separada) y puede que necesites ajustar cada uno.
• Si tu header utiliza transformaciones (transform: translateY) para animaciones, ten en cuenta que transform no cambia el flujo para colocar el header debajo de la admin bar deberás usar top en combinación con transform para animaciones visuales.

Con estas técnicas usando calc(), variables CSS y (si es necesario) un pequeño script para medir la altura real, evitarás que la cabecera salte al mostrar la barra de administración y garantizarás una experiencia consistente para usuarios autenticados en WordPress.