Tutorial WordPress: Crear una cabecera con dos filas (logo arriba, menú abajo) con CSS

Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo crear una cabecera en WordPress que tenga dos filas: la fila superior con el logotipo y la fila inferior con el menú de navegación. Se incluyen los fragmentos de código necesarios para functions.php, header.php y las reglas CSS completas (con versión responsive y opciones avanzadas como sticky y menú móvil con el método CSS puro). Todos los ejemplos de código están listados en bloques ltpre class=EnlighterJSRAW …gt según tus indicaciones.

Requisitos previos

Un tema hijo activo (child theme) o permisos para editar el tema.
Acceso al editor de temas o FTP/SFTP para subir archivos.
Conocimientos básicos de HTML/CSS y algo de PHP para integrar las funciones del tema.
Un menú creado en Apariencia → Menús y, opcionalmente, un logotipo subido desde Personalizar → Identidad del sitio.

Paso 1 — Preparar el tema: soporte para logo y registro del menú

En functions.php añade soporte para custom logo y registra la ubicación del menú que usará la fila inferior. Esto garantiza que el logotipo se gestione desde el personalizador y que el menú sea editable desde el admin.

lt?php
// Añadir soporte para logo personalizado
function tema_hijo_setup() {
    add_theme_support( custom-logo, array(
        height      =gt 80,
        width       =gt 300,
        flex-height =gt true,
        flex-width  =gt true,
    ) )

    // Registrar ubicación del menú
    register_nav_menus( array(
        primary =gt __( Menú principal, tema-hijo ),
    ) )
}
add_action( after_setup_theme, tema_hijo_setup )
?gt

Paso 2 — Estructura HTML del header

En header.php coloca una estructura clara y semántica con dos bloques: header-top (logo) y header-bottom (menú). Usa clases predecibles para aplicar estilos CSS fácilmente.

lt!-- header.php: fragmento para cabecera de dos filas --gt
ltheader class=site-headergt
    ltdiv class=header-topgt
        ltdiv class=container header-top-innergt
            ltdiv class=site-brandinggt
                lt?php
                if ( function_exists( the_custom_logo )  has_custom_logo() ) {
                    the_custom_logo()
                } else {
                    ?gt
                    lta href=lt?php echo esc_url( home_url( / ) ) ?gt class=site-titlegtlt?php bloginfo( name ) ?gtlt/agt
                    lt?php
                }
                ?gt
            lt/divgt lt!-- .site-branding --gt
        lt/divgt lt!-- .container --gt
    lt/divgt lt!-- .header-top --gt

    ltdiv class=header-bottomgt
        ltdiv class=container header-bottom-innergt
            ltnav class=main-navigation aria-label=Menú principalgt
                lt?php
                wp_nav_menu( array(
                    theme_location =gt primary,
                    container =gt false,
                    menu_class =gt menu,
                    fallback_cb =gt false,
                ) )
                ?gt
            lt/navgt lt!-- .main-navigation --gt
        lt/divgt lt!-- .container --gt
    lt/divgt lt!-- .header-bottom --gt
lt/headergt

Paso 3 — CSS base para la cabecera de dos filas

El CSS que sigue crea una cabecera limpia: fila superior para el logo centrado (o alineado a la izquierda), fila inferior para el menú con alineación y espaciado controlable. Incluye estilos responsive y una opción para menú móvil con el «checkbox hack» (sin JS exterior).

/ Reset básico para la cabecera /
.site-header { width: 100% background: #ffffff box-shadow: 0 1px 0 rgba(0,0,0,0.05) }

/ Contenedor general /
.container { max-width: 1200px margin: 0 auto padding: 0 20px box-sizing: border-box }

/ Fila superior (logo) /
.header-top { padding: 18px 0 }
.header-top-inner { display: flex align-items: center justify-content: space-between }

/ Si quieres el logo centrado, usa center. Aquí se centra verticalmente y puede alinearse a la izquierda /
.site-branding { display: flex align-items: center }
.site-branding .custom-logo { max-height: 60px height: auto width: auto }

/ Fila inferior (menú) /
.header-bottom { background: #f8f8f8 border-top: 1px solid rgba(0,0,0,0.03) }
.header-bottom-inner { display: flex align-items: center justify-content: center }

/ Estilos del menú /
.main-navigation .menu { list-style: none margin: 0 padding: 0 display: flex gap: 28px }
.main-navigation .menu li { position: relative }
.main-navigation .menu li a { display: inline-block padding: 14px 8px color: #222 text-decoration: none font-weight: 500 }

/ Hover y estados /
.main-navigation .menu li a:hover,
.main-navigation .menu li a:focus { color: #0073aa outline: none }

/ Separar filas visualmente cuando la cabecera sea más ancha /
.site-header .header-top { display: block }
.site-header .header-bottom { display: block }

/ Sticky opcional /
.site-header.sticky {
    position: sticky
    top: 0
    z-index: 9999
}

/ Responsive: menú móvil (checkbox hack) /
@media (max-width: 900px) {
    .header-top-inner { justify-content: space-between }
    / Ocultar menú de escritorio /
    .main-navigation .menu { display: none flex-direction: column gap: 0 }
    / Mostrar botón hamburguesa /
    .menu-toggle { display: inline-flex align-items: center justify-content: center width: 44px height: 44px cursor: pointer border: none background: transparent }
}

/ Checkbox hack: si usas un checkbox para alternar el menú /
.menu-toggle { display: none } / por defecto oculto en desktop /

/ Ejemplo de checkbox/label para el toggle (agregar en HTML si se usa este método):
   ltinput type=checkbox id=menu-toggle class=menu-toggle-checkboxgt
   ltlabel for=menu-toggle class=menu-togglegt☰lt/labelgt
/
.menu-toggle-checkbox { display: none }
.menu-toggle-checkbox:checked ~ .header-bottom .main-navigation .menu {
    display: flex
    flex-direction: column
}

/ Ajustes visuales finales /
@media (max-width: 480px) {
    .site-branding .site-title { font-size: 18px }
    .main-navigation .menu li a { padding: 12px 10px }
}

Paso 4 — Fragmentos útiles de integración y qué tener en cuenta

A continuación tienes un ejemplo de cómo imprimir el menú con opciones accesibles y un pequeño markup para el toggle de móvil (si optas por el checkbox hack). Inserta el input/label en el header en la posición que prefieras (normalmente dentro de .header-top o a la derecha de .header-top-inner).

lt!-- Inserta en header.php si quieres menú móvil con checkbox (añadir estilos ya mostrados) --gt
ltinput id=menu-toggle class=menu-toggle-checkbox type=checkboxgt
ltlabel class=menu-toggle for=menu-toggle aria-hidden=truegtamp#9776lt/labelgt

ltnav class=main-navigation aria-label=Menú principalgt
    lt?php
    wp_nav_menu( array(
        theme_location =gt primary,
        container =gt false,
        menu_class =gt menu,
        fallback_cb =gt false,
        depth =gt 2, // profundidad, ajustar si hay submenús
    ) )
    ?gt
lt/navgt

Opciones avanzadas y personalizaciones

Cabecera sticky pero con altura variable: Si tu header tiene dos filas y quieres que al hacer scroll solo la fila inferior quede fija, aplica position: sticky al .header-bottom en lugar de a .site-header y ajusta top con la altura de la fila superior.
Logo retina: Para imágenes retina, sube una versión 2x en el custom logo o usa srcset en el output del logo mediante filtro si necesitas control avanzado.
Mostrar/ocultar elementos según el ancho: Usa media queries para ocultar textos largos del título en móviles y mostrar solo el logotipo.
Submenús: Añade estilos para .menu li ul para dropdowns, controlando display, position:absolute y z-index. Considera usar js para accesibilidad en submenús con focus/keyboard.

Accesibilidad (a11y) y SEO

Siempre añade atributo alt al logotipo (WordPress lo maneja si subes la imagen en Identidad del sitio).
Usa ltnav aria-label=Menú principalgt para describir la navegación.
Evita ocultar enlaces de navegación con display:none para lectores de pantalla en móvil usa técnicas que aún permitan el acceso del teclado y lectores.
Comprueba orden de tabulación: el input del toggle debería estar antes del nav para que el label funcione y el foco recorra en orden lógico.

Depuración y pruebas

Probar en varios navegadores (Chrome, Firefox, Safari) y dispositivos (móvil, tablet, desktop).
Revisar que el logotipo se escala bien y que no distorsiona el layout.
Comprobar el comportamiento del menú con muchas entradas y con submenús revisar solapamientos y z-index.
Validar accesibilidad básica: navegación por teclado, lectura con lector de pantalla, atributos aria donde sean necesarios.
Probar rendimiento: evita imágenes demasiado grandes y minimiza CSS si es necesario.

Resumen final

Crear una cabecera en dos filas en WordPress (logo arriba, menú abajo) es una tarea de tres partes: 1) habilitar soporte para logo y registrar el menú en functions.php, 2) escribir una estructura semántica en header.php con header-top y header-bottom, y 3) añadir CSS que gestione la disposición desktop y mobile (incluyendo la posibilidad de menú móvil con checkbox o mediante JavaScript si prefieres). Con los fragmentos incluidos en este artículo tienes una base sólida para adaptar estilos, comportamiento sticky y accesibilidad según las necesidades de tu proyecto.

SushiHost