Consigue que la cabecera de Genesis Sample desaparezca conforme navegas hacia abajo en la página y vuelva a mostrarse al realizar scroll hacia arriba.
¿Te gustaría que el header solo se visualice cuando el usuario lo necesita?
Es decir, que se oculte cuando el lector está centrado en el contenido y avanza hacia el final de la página, pero que vuelva a aparecer en cuanto cambie de dirección y haga scroll hasta la parte superior de la web.
En el vídeo entenderás a qué me refiero:
¿Te interesa? A continuación te explico cómo introducir este efecto en el child theme Genesis Sample.
Pasos para hacer que el header se oculte o muestre dependiendo de la dirección de navegación en Genesis Sample
1. Crea un fichero scroll-up-sticky-header.js
Inserta este fragmento en un nuevo archivo llamado scroll-up-sticky-header.js:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
Este script es el encargado de añadir las clases para mostrar u ocultar la cabecera mediante CSS.
2. Modifica el fichero functions.php
Ahora, pega el siguiente bloque al final del archivo functions.php:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
Con estas líneas consigues que el tema cargue el fichero scroll-up-sticky-header.js.
3. Edita el archivo style.css
Por último, introduce el siguiente código al final de style.css:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
Con este último paso, aplicas los estilos para que la cabecera desaparezca al hacer scroll hacia abajo y aparezca de nuevo al subir.
3.1. Alternativa
Si lo prefieres, puedes colocar la primera parte del código (hasta las media queries) en el apartado de Site Header y el resto después de las media queries.
¿Qué ventaja tiene insertarlo todo al final?
Si el child theme recibe una actualización te resultará más sencillo copiar el snippet y volver a pegarlo en la nueva versión.
Así, dependiendo del proyecto (propio o para un cliente), te interesará hacer estos cambios de una u otra forma. Tú eliges. 😉
Conclusiones
Cada vez veo más sitos web que utilizan este efecto de cabecera «inteligente» que solo se muestra cuando la necesitas.
Si tú o tu cliente habéis visto este efecto en otra web y os gustado, ahora ya sabes cómo aplicarlo a Genesis Sample.
También puedes agregarlo a cualquier otro child theme de Genesis realizando pequeñas modificaciones.
Si no lo consigues, déjame los detalles y el nombre del child theme donde te interesa aplicarlo en los comentarios para que cree un tutorial personalizado con tu pregunta.
Ventajas de ser suscriptor. 😉