SushiHost

Tutorial WordPress: Hacer un header transparente sobre la imagen hero con CSS

SushiHost

·

·

Introducción

Un header transparente sobre la imagen hero aporta un aspecto moderno y elegante a cualquier web en WordPress. La idea es que la cabecera (logo, navegación, botones) quede superpuesta sobre la imagen o bloque hero, con el fondo de la cabecera en transparente mientras la imagen se ve debajo. Este artículo explica, paso a paso y con todo lujo de detalles, cómo lograrlo con CSS, cómo manejar la versión fija (sticky) y cambios de estilo al hacer scroll, cómo integrarlo en WordPress (child theme, Customizer o snippets), y cómo evitar errores comunes en escritorio y móvil.

Concepto y consideraciones antes de empezar

Antes de tocar CSS o JS debes tener en cuenta:

Pasos generales (resumen)

  1. Identificar el selector de la cabecera del tema.
  2. Hacer la cabecera position: absolute o fixed y background: transparent.
  3. Asegurar un z-index superior al hero.
  4. Añadir padding-top al hero igual a la altura del header (o usar spacer CSS variable).
  5. Agregar transición y lógica para cambiar el fondo al hacer scroll (para accesibilidad).
  6. Tratar casos móviles y menús desplegables.

Ejemplo 1: CSS básico para header transparente sobre hero

Este fragmento funciona si tu header usa la clase .site-header y el hero tiene la clase .hero. Pegarlo en Apariencia → Personalizar → CSS adicional o en el CSS del child theme.

/ Header transparente superpuesto /
.site-header {
  position: absolute / o fixed si quieres que se pegue al hacer scroll /
  top: 0
  left: 0
  width: 100%
  background: transparent
  z-index: 1000 / asegurarse de que esté por encima del hero /
  transition: background-color 0.25s ease, box-shadow 0.25s ease
}

/ Evitamos que el contenido del header tape la imagen hero ajustando el stacking /
.hero {
  position: relative
  z-index: 1
  padding-top: 120px / ajustar según la altura real del header /
}

Notas sobre este CSS

Ejemplo 2: Cambio de fondo al hacer scroll (mejor legibilidad)

Comportamiento común: el header es transparente al cargar la página (overlay sobre el hero) y al hacer scroll se le aplica una clase que le da fondo sólido o semitransparente para mejorar la lectura.

CSS (clase .site-header.scrolled):

.site-header.scrolled {
  background-color: rgba(255,255,255,0.95) / fondo claro al hacer scroll /
  box-shadow: 0 2px 8px rgba(0,0,0,0.08)
  color: #222
}
.site-header.scrolled a { color: #222 } / links en color oscuro al hacer scroll /

JavaScript sencillo para añadir/quitar la clase cuando se supera un umbral (ej. 50px):

// Añadir este script al footer o encolado correctamente
(function() {
  var header = document.querySelector(.site-header)
  if (!header) return
  var threshold = 50 // px
  var onScroll = function() {
    if (window.scrollY > threshold) {
      header.classList.add(scrolled)
    } else {
      header.classList.remove(scrolled)
    }
  }
  document.addEventListener(scroll, onScroll, { passive: true })
  onScroll()
})()

Para añadir este JS sin editar plantillas, crea un archivo .js y encolalo vía functions.php (ejemplo más abajo).

Ejemplo 3: Encolar el JS desde functions.php (WordPress)

Coloca esto en el functions.php de tu child theme o en un snippet manager. Asegúrate de usar un identificador único.

/ Encolar script para cambiar la clase del header al hacer scroll /
function tema_child_enqueue_header_script() {
  // Ajusta la ruta al archivo .js ubicado en tu child theme /assets/js/header-scroll.js
  wp_enqueue_script(
    child-header-scroll,
    get_stylesheet_directory_uri() . /assets/js/header-scroll.js,
    array(),
    1.0,
    true
  )
}
add_action(wp_enqueue_scripts, tema_child_enqueue_header_script)

Selección de selectores por tema (tabla guía)

Tema Selector común del header
Astra .ast-header, .ast-site-header
GeneratePress .site-header, .main-navigation
Twenty Twenty-Three / bloques .wp-block-template-part, .wp-block-site-header
Elementor .elementor-location-header, .header-wrapper
OceanWP .oceanwp-mobile-header, .site-header

Trucos y detalles técnicos importantes

Ejemplo: cambiar logo con CSS según clase scrolled

/ Suponiendo que el logo es una img dentro de .site-logo img /
.site-logo img { transition: opacity 0.25s ease }

/ Ocultar logo claro cuando se hace scroll y mostrar logo oscuro /
.site-logo img.logo-dark { display: none }
.site-header.scrolled .site-logo img.logo-dark { display: inline-block }
.site-header.scrolled .site-logo img.logo-light { display: none }

Móvil: menú hamburguesa y superposición

En móvil es habitual que el menú desplegable quede por debajo o por encima con problemas. Recomendaciones:

Ejemplo CSS para menú móvil:

/ Selector de ejemplo, adaptar según tema /
.main-navigation.toggled-on {
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: rgba(0,0,0,0.7) / fondo oscuro al abrir el menú /
  z-index: 1100 / por encima del header /
}

Cómo medir la altura del header y aplicar el espaciado correcto

  1. Inspecciona el header en el navegador y mide su altura real en px (o usa una variable CSS si tu tema la expone).
  2. Aplica padding-top al hero igual a esa altura (o usa calc y variables para mantenerlo responsive).
  3. Si el header cambia de tamaño en móviles (más alto), usa media queries para ajustar el padding-top del hero en cada breakpoint.
/ Ejemplo responsive: ajustar el espacio del hero según alturas /
.hero {
  padding-top: 90px / escritorio /
}
@media (max-width: 768px) {
  .hero {
    padding-top: 120px / más alto en móvil si el header ocupa más espacio /
  }
}

Problemas comunes y soluciones rápidas

Accesibilidad y contraste

La cabecera debe mantener buen contraste para usuarios con baja visión. Si el hero es muy claro/oscuro, considera:

Ejemplo completo (resumen de implementación)

1) Localiza el selector de tu header (ej. .site-header). 2) Añade CSS para hacerlo absoluto y transparente. 3) Ajusta el hero con padding-top. 4) Añade JS para alternar clase scrolled. 5) Encola el JS desde functions.php si lo deseas.

/ CSS completo de ejemplo /
.site-header {
  position: absolute
  top: 0
  left: 0
  width: 100%
  background: transparent
  z-index: 1000
  transition: background-color 0.25s ease, box-shadow 0.25s ease
}
.site-header .main-navigation a { color: #fff } / links blancos sobre imagen /

.site-header.scrolled {
  background-color: rgba(255,255,255,0.95)
  box-shadow: 0 2px 8px rgba(0,0,0,0.08)
}
.site-header.scrolled .main-navigation a { color: #222 }

/ Espacio para el hero según la altura del header /
.hero { padding-top: 110px }
@media (max-width: 768px) {
  .hero { padding-top: 140px }
}

// JS para alternar la clase .scrolled
(function() {
  var header = document.querySelector(.site-header)
  if (!header) return
  var threshold = 60
  function onScroll() {
    if (window.scrollY > threshold) header.classList.add(scrolled)
    else header.classList.remove(scrolled)
  }
  document.addEventListener(scroll, onScroll, { passive: true })
  onScroll()
})()

Conclusión

Implementar un header transparente sobre el hero en WordPress requiere principalmente tres cosas: identificar el selector correcto del header, posicionarlo encima del hero con z-index y ajustar el espaciado del hero. Añadir una transición visual al hacer scroll y gestionar el menú móvil elevan la experiencia de usuario. Aplicando los fragmentos CSS/JS y las recomendaciones aquí dadas obtendrás un resultado elegante y estable en la mayoría de temas. Ajusta selectores y valores (height, umbrales, colores) según tu diseño concreto.

Recuerda

Integra los cambios mediante un child theme o el Customizer, prueba en diferentes dispositivos y navegadores, y mide el contraste para mantener la accesibilidad.

SushiHost

Leave a Reply

Your email address will not be published. Required fields are marked *