Sticky Header on Scroll

La cabecera que acompaña al lector puede ser otra distinta

Arriba de todo, tu cabecera tiene espacio para el logo, el menú completo y algún botón. A mitad de un artículo largo, esa misma barra pegada al borde ocupa pantalla y ofrece opciones pensadas para quien acaba de llegar. Alguien que está leyendo necesita otras cosas: saber dónde está, compartir lo que lee y seguir a la siguiente entrada.

Cuando alguien baja por la página ya no está en el mismo momento que al llegar, así que la barra que lo acompaña puede hacer un trabajo diferente. Sticky Header on Scroll, de Bonfire Themes, parte de esa diferencia: en lugar de congelar la cabecera de tu tema, añade una propia que aparece al desplazarse.

Funciona como plugin, sin cambiar ni modificar el tema que ya tienes.

Qué lleva la barra al desplazarse

• Menú desplegable: navegación de varios niveles, con etiqueta personalizada en el botón.
• Logo: como texto o imagen subida, con tamaño y colores ajustables.
• Título de la entrada: visible en las entradas del blog, con prefijo propio o sin él.
• Botones para compartir: en las entradas, con Facebook, Twitter, LinkedIn y correo electrónico, entre otras opciones.
• Botón de siguiente entrada: también en las entradas, con colores ajustables.

Puedes ocultar por separado el desplegable, el logo, el título, los botones para compartir y el botón de siguiente entrada, de modo que la barra lleve solo lo que necesitas.

Todo el aspecto se ajusta con vista previa

La configuración se integra en el Personalizador de WordPress y muestra los cambios en tiempo real. Estas son las opciones que más cambian el resultado:

• Altura y distancia: defines el alto de la barra y cuánto debe bajar el lector para que aparezca.
• Diseño Slim: una variante más delgada de la cabecera.
• Fondo: color con opacidad, o imagen en patrón o a tamaño completo, también con opacidad.
• Desplegable: ancho, alto, colores y una barra de desplazamiento opcional más cuidada.
• Resolución: puedes mostrarla solo en determinadas resoluciones, por ejemplo únicamente en escritorio.
• Cabecera del tema: puedes ocultarla indicando su clase o ID.

Si esperas fijar tu barra actual, este no es el camino

El plugin crea una cabecera nueva. Si quieres que tu menú actual, con su diseño exacto, se quede pegado arriba, necesitarás otra herramienta o una función de tu tema.

Tu menú pasa a un desplegable dentro de esa barra, y no a una fila de enlaces siempre visibles. Tres de sus piezas, el título, los botones para compartir y el de siguiente entrada, están pensadas para entradas de blog, por lo que en un sitio solo de páginas su aporte baja a menú y logo.

Tampoco está optimizado para Gutenberg, y si combinas su barra con la cabecera fija que traiga tu tema, comprueba que no se solapen.

Cómo dejarla funcionando en tu tema

El proceso cabe en pocos pasos y conviene revisarlo con una entrada larga abierta:

1. Instala y activa el plugin en tu WordPress.
2. Abre el Personalizador y localiza sus ajustes.
3. Define a qué distancia de desplazamiento aparece y qué altura tiene.
4. Configura el menú, el logo y los elementos que quieras en las entradas, y oculta el resto.
5. Si tu tema ya tiene una barra fija, oculta la que sobre con su clase o ID.
6. Prueba en escritorio y en teléfono, y limita la resolución si hace falta.

Más formas de mantener la navegación a la vista

Si lo que buscas es un menú grande y fijo, Max Mega Menu Pro construye mega menús y añade en su versión Pro menús fijos. UberMenu también crea mega menús, con el menú fijo como extensión aparte. Si tu sitio usa OceanWP, revisa OceanWP Sticky Header.

La barra flotante, punto por punto

¿Tengo que cambiar de tema?

No. Se añade a tu tema actual sin modificarlo.

¿Puedo esconder mi cabecera original?

Sí. Indica la clase o el ID del elemento y el plugin lo oculta.

¿Puedo usarla solo en escritorio?

Sí. Puedes limitarla a las resoluciones que indiques.

¿Cuándo aparece?

Tras el desplazamiento que configures. Esa distancia es ajustable.

¿El menú admite submenús?

Sí. El desplegable es de varios niveles.

¿Sirve en un sitio sin blog?

Sí, para menú y logo. El título, los botones para compartir y el botón de siguiente entrada se muestran en entradas.