Autor: camilo

Para manejar cabeceras diferentes entre PC y celular, o para ocultar/mostrar elementos específicos, los desarrolladores usamos dos caminos en WordPress: el enfoque limpio usando Utility Classes de CSS (control total de código) o el enfoque visual nativo del editor si tu tema lo soporta.

Como eres programador, el método CSS te dará la precisión exacta que buscas sin sobrecargar el DOM. Aquí tienes cómo implementar ambas soluciones:

Método 1: Un solo Header, ocultando objetos específicos (Recomendado)

Es la forma más eficiente. Usas el mismo Header para ahorrar peticiones, pero le dices a ciertos bloques (como un botón grande de reserva o una imagen secundaria) que desaparezcan en el celular.

1. Asigna clases en el editor:

Selecciona el bloque que quieres ocultar en el celular (por ejemplo, el botón de reserva de tus servicios turísticos) y en el panel derecho (Avanzado > Clase CSS adicional), agrégale la clase: ocultar-en-movil.

Si tienes un botón de menú tipo hamburguesa que solo quieres ver en el teléfono, selecciónalo y ponle la clase: ocultar-en-escritorio.

2. Añade las Media Queries en tu CSS adicional:

En tu pestaña de CSS adicional del Personalizador (donde pusiste el código del scroll), pega estas clases utilitarias clásicas:

Al estar utilizando el editor por defecto de WordPress (Gutenberg) dentro de tu contenedor Docker, tienes varias opciones limpias para inyectar este código sin romper la estructura del sitio.

Como ya sabes estructurar el CSS, el truco aquí está en dividir el problema en dos partes: añadir una clase CSS al bloque del Header en el editor, y luego inyectar el código CSS y el JavaScript (necesario para detectar el scroll) en el lugar correcto.

Aquí tienes el paso a paso exacto de cómo y dónde meter cada fragmento:

Paso 1: Asignar una clase CSS a tu Header en el Editor

Para que tu código no afecte a otros elementos de la página, debemos darle un identificador único al bloque que contiene tu menú.

1. Entra a editar tu Header (ya sea en el Editor del Sitio o en la página donde lo creaste).
2. Selecciona el bloque contenedor principal de tu Header (lo ideal es que sea un bloque de Grupo o Fila que envuelva al logo y al menú).
3. En el panel de configuraciones de la derecha, expande la pestaña Avanzado.
4. En el campo Clase CSS adicional, escribe: header-animado.
5. Guarda los cambios.

Paso 2: ¿Dónde insertar el código CSS?

Para proyectos limpios como el tuyo, la forma más rápida y nativa de agregar CSS sin crear temas hijos es usando el Personalizador de WordPress.

1. En tu panel de administración, ve a Apariencia > Personalizar (Si usas un tema de bloques moderno y no ves esta opción, puedes acceder directamente escribiendo en tu navegador: http://localhost:8080/wp-admin/customize.php).
2. Haz clic en la pestaña CSS adicional.
3. Pega tu código adaptado. Debería verse similar a esto para lograr el efecto de encogimiento:

Bienvenido(a) a WordPress. Esta es tu primera entrada. Edítala o bórrala ¡y comienza a publicar!