Descubre en este tutorial cómo conseguir que la cabecera de Genesis Sample se reduzca de tamaño al hacer scroll en la página mediante snippets de código.
¿Te gustaría que la cabecera y el logotipo se encogieran al hacer scroll tal y como ocurre en el child theme Business Pro?
A continuación te explico cómo introducir este efecto en el child theme Genesis Sample.
Pasos para conseguir que el logotipo y la cabecera se encojan al hacer scroll en Genesis Sample
1. Crea un fichero shrink-header.js
Inserta este fragmento en un nuevo archivo shrink-header.js:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Este script es el encargado de añadir la clase .shrink, la cual te permite redimensionar el logotipo 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 2057 snippets de esta web,
identifícate o suscríbete aquí.
Con estas líneas consigues que el tema cargue el fichero shrink-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 2057 snippets de esta web,
identifícate o suscríbete aquí.
Con este último paso, aplicas los estilos para obtener el efecto de la cabecera y el logotipo disminuyendo de tamaño al hacer scroll.
En el ejemplo anterior, la anchura del logo pasa de 200 a 150 píxeles cuando navegas hacia el abajo en la página.
Pero dependiendo del tamaño y forma del mismo, te invito a ajustar estos valores para que se adapten mejor al proyecto en el que estás trabajando.
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á aplicar estos cambios de una u otra forma. Tú eliges. 😉
Conclusiones
No voy a negártelo, el efecto visual del logotipo reduciendo su tamaño conforme haces scroll en la página es muy atractivo.
Si tú o tu cliente os habéis enamorado de este efecto, característico del tema Business Pro, 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 tema hijo donde te interesa aplicarlo en los comentarios para que pueda crear un tutorial personalizado con tu pregunta.
Ventajas de ser suscriptor.😉
