Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo centrar el logo del header de un tema de WordPress y mover el menú principal justo debajo del logo usando únicamente CSS. Encontrarás varias técnicas (flexbox, absolute transform, centrado por bloque), soluciones para temas comunes, recomendaciones para responsividad y cómo aplicar el CSS seguro en tu sitio (Customizer o child theme).

Requisitos previos

1. Acceso al área de administración de WordPress (para añadir CSS en Apariencia → Personalizar → CSS adicional) o acceso FTP/hosting para instalar/modificar un child theme.
2. Conocimientos básicos de inspección de elementos (herramientas de desarrollador del navegador) para identificar las clases/IDs del logo y del menú de tu tema.
3. Entender que cada tema tiene HTML distinto los selectores del ejemplo pueden necesitar adaptarse.

Antes de empezar: inspecciona tu header

Abre las herramientas del navegador (F12 o botón derecho → Inspeccionar) y localiza los contenedores del header. Normalmente encontrarás estructuras similares a estas:

• .site-header (contenedor principal del header)
• .site-branding o .logo (contenedor del logo)
• .site-logo o .custom-logo-link (imagen del logo)
• .main-navigation o .primary-menu (contenedor del menú)

Anota las clases exactas que use tu tema los ejemplos siguientes usan selectores genéricos que deberás adaptar.

Método 1 — Flexbox (recomendado por su simplicidad y robustez)

Usar flexbox permite alinear el logo al centro y colocar el menú debajo sin cambiar el HTML. Esta técnica funciona muy bien si el header es un contenedor que puede comportarse como columna.

Ejemplo genérico:

/ Ajusta los selectores a los de tu tema /
.site-header {
  display: flex
  flex-direction: column / coloca logo y menú en columna /
  align-items: center    / centra horizontalmente todos los hijos /
  justify-content: center
  padding: 1rem 0
}

/ Asegura que el branding (logo) esté centrado /
.site-header .site-branding {
  display: flex
  align-items: center
  justify-content: center
  width: 100%
}

/ Menú debajo, centrado /
.site-header .main-navigation {
  width: 100%
  text-align: center
  margin-top: 0.75rem
}

/ Opcional: que los items del menú se muestren inline y centrados /
.site-header .main-navigation ul {
  list-style: none
  margin: 0
  padding: 0
  display: inline-flex
  gap: 1rem
}

Método 2 — Centrar el logo como bloque (si el logo es un link o imagen inline)

Si la estructura no admite cambiar el flujo a columna, puedes centrar el logo convirtiéndolo en un bloque con margin auto y mover el menú abajo mediante display:block/clear.

/ Convierte el logo en bloque y centra /
.site-header .custom-logo-link,
.site-header .site-logo img {
  display: block
  margin-left: auto
  margin-right: auto
}

/ Forzar que el menú esté debajo del logo /
.site-header .main-navigation {
  display: block
  clear: both
  width: 100%
  text-align: center
  margin-top: 0.75rem
}

Método 3 — Absolute transform (cuando necesitas superponer o centrar independientemente del flujo)

Este método coloca el logo en el centro visual del header con posicionamiento absoluto útil si el header tiene altura fija o quieres mantener otros elementos en su posición. Ten cuidado con la superposición y el flujo del menú.

/ Contenedor del header debe ser relativo /
.site-header {
  position: relative
}

/ Centrar absolute /
.site-header .site-branding {
  position: absolute
  left: 50%
  top: 50% / ajusta según necesites /
  transform: translate(-50%, -50%)
  z-index: 5 / para que aparezca encima si se solapa /
  text-align: center
}

/ Empujar menú debajo visualmente (si el menú está en flujo normal, dale margen superior) /
.site-header .main-navigation {
  margin-top: calc( (/altura de header/ 80px) / 1 ) / ajustar según tu header /
  text-align: center
}

Mover el menú debajo: enfoques según la estructura

Dependiendo de si el menú está al mismo nivel que el logo o dentro de otro contenedor, tienes varias opciones:

• Si ambos son hijos directos de .site-header: usar flex-direction: column (ver Método 1).
• Si el menú flota a la derecha: elimina float y usa display:inline-flex o block y text-align:center.
• Si el menú está en una posición separada, usa CSS para forzarlo a ocupar 100% y centrar su contenido.

Ejemplo combinado y adaptado para muchas plantillas:

/ Ejemplo combinado de uso común /
.site-header {
  display: flex
  flex-direction: column
  align-items: center
  position: relative
}

/ Logo centrado /
.site-header .site-branding {
  width: 100%
  display: flex
  justify-content: center
  align-items: center
}

/ Menú debajo y centrado /
.site-header .main-navigation {
  width: 100%
  text-align: center
  margin-top: 0.5rem
}

/ Arreglar estilos del ul del menú para centrar elementos /
.site-header .main-navigation ul {
  display: inline-flex
  list-style: none
  gap: 1rem
  padding: 0
  margin: 0
}

Ajustes responsivos y menú móvil

No olvides adaptar el diseño a pantallas pequeñas. Normalmente querrás que en móviles el menú sea un botón hamburguesa o un menú en columna. Aquí unos ejemplos de media queries:

/ Media queries ejemplo /
@media (max-width: 768px) {
  .site-header {
    padding: 0.5rem
  }

  / Logo más pequeño en móvil /
  .site-header .site-branding img {
    max-width: 160px
    height: auto
  }

  / Menu en columna (si no usas un toggle JS) /
  .site-header .main-navigation ul {
    display: flex
    flex-direction: column
    gap: 0.5rem
    align-items: center
  }
}

/ Si tu tema usa un botón para el menú, asegúrate de que no quede oculto por el logo /
.site-header .menu-toggle {
  z-index: 10
}

Cómo añadir este CSS a tu WordPress (dos formas seguras)

1. Personalizar → CSS adicional: pega el CSS final adaptado a tus selectores. Es la forma más rápida.
2. Child theme: añade el CSS a style.css del child theme para cambios permanentes y control de versiones. Ejemplo de cabecera mínima de style.css:

/
 Theme Name:   Mi Tema Hijo
 Template:     nombre-del-tema-padre
/
 / Pega aquí tu CSS personalizado debajo /
 .site-header { / ... / }

Especificidad, prioridades y !important

Si tu tema aplica reglas con alta especificidad o regras inline, quizá necesites aumentar la especificidad de tus selectores. Evita usar !important salvo como último recurso. Ejemplo de selector con más especificidad:

/ Más específico /
header.site-header .wrap .site-branding {
  display: flex
  justify-content: center
}

Depuración: qué mirar si no funciona

• Verifica que los selectores coincidan exactamente con los del HTML del tema.
• Comprueba en el inspector si otras reglas están sobrescribiendo las tuyas (pestaña Computed o Styles).
• Si usas caché/optimización CSS, purga la caché tras los cambios.
• Comprueba z-index y posicionamiento para evitar que el menú o logo queden detrás de otros elementos.

Problemas frecuentes y soluciones rápidas

• Logo se corta: asegúrate de que la imagen tenga height:auto y max-width: 100% ajusta padding/margin del header.
• Menú no baja: elimina floats del menú (float: none) y usa display:block o flex en el contenedor padre.
• Menu oculto por logo absoluto: aumenta margin-top del menú o reduce la altura del logo usa z-index apropiado.
• Estilos del tema cacheados: purga cache (plugin, CDN, navegador).

Ejemplo final listo para pegar (adaptar selectores a tu tema)

/ Ejemplo completo: centra logo y mueve menú debajo /
.site-header {
  display: flex
  flex-direction: column
  align-items: center
  padding: 1rem 1rem
  position: relative
}

.site-header .site-branding {
  width: 100%
  display: flex
  justify-content: center
  align-items: center
}

.site-header .site-branding img,
.site-header .custom-logo-link img {
  max-width: 240px
  width: auto
  height: auto
  display: block
}

/ Menú centrado debajo del logo /
.site-header .main-navigation {
  width: 100%
  text-align: center
  margin-top: 0.75rem
}

.site-header .main-navigation ul {
  display: inline-flex
  list-style: none
  margin: 0
  padding: 0
  gap: 1rem
}

/ Ajustes responsive /
@media (max-width: 768px) {
  .site-header .site-branding img {
    max-width: 160px
  }
  .site-header .main-navigation ul {
    display: flex
    flex-direction: column
    gap: 0.5rem
    align-items: center
  }
}

Conclusión

Con las técnicas explicadas puedes centrar el logo del header y mover el menú debajo de forma fiable y potente usando solo CSS. El método a elegir depende de la estructura de tu tema: flexbox suele ser el más sencillo y robusto absolute transform es útil para posicionamientos más complejos margin:auto funciona si el logo puede ser tratado como bloque. Adapta los selectores a tu HTML, prueba en móviles y recuerda aplicar los cambios mediante CSS adicional o un child theme para mantenerlos seguros ante actualizaciones.