Agrega una barra superior en la cabecera de Genesis Sample que desaparezca al hacer scroll a la vez que se reduce el tamaño del logo con este tutorial.
Algunos child themes de Genesis ofrecen la opción de mostrar una barra superior en la cabecera (lo que se conoce como «utility bar»).
Esto resulta muy práctico cuando quieres insertar mensajes temporales, ofertas, métodos de contacto…
¿Quieres añadir esta barra en la cabecera de otros temas que no tienen esta función?
Pues hoy vas a aprender a crear una barra superior personalizada con dos áreas (izquierda/derecha) en Genesis Sample (2.9.1) que se oculte al hacer scroll hacia abajo y combinarla con el efecto de encoger el logotipo al mismo tiempo.
Seguro que lo entiendes mejor con este vídeo:
¿Quieres este efecto en tu child theme? Pues sigue leyendo. 😉
Pasos para conseguir que el logotipo y la cabecera se encojan al hacer scroll en Genesis Sample
1. Modifica el fichero genesis-sample.js
En el fichero genesis-sample.js, ubicado en la carpeta /js/, sustituye:
Para ver este código, puedes identificarte o suscribirte.
Con esta acción cambias .site-header por .fixed-header.
Y además introduces un script encargado de crear la clase .shrink, la cual te permite redimensionar el logotipo mediante CSS.
2. Modifica el fichero functions.php
Añade el siguiente fragmento al final del fichero functions.php o a tu plugin de funcionalidades:
Para ver este código, puedes identificarte o suscribirte.
Con estas líneas generas una barra superior que aparece por encima de la cabecera con dos áreas de widget, una para la mitad izquierda y otra para la derecha.
3. Edita el archivo style.css
Por último, introduce el siguiente código al final de style.css:
Para ver este código, puedes identificarte o suscribirte.
Con este paso aplicas los estilos para conseguir que la cabecera y el logotipo disminuyan de tamaño al hacer scroll al mismo tiempo que la barra superior se oculta.
En el ejemplo anterior, la anchura del logo pasa de 300 a 250 píxeles cuando navegas hacia abajo en la página.
Pero dependiendo del tamaño y forma del mismo, te invito a ajustar estos valores para que se adapte mejor al proyecto en el que estás trabajando.
4. Incluye contenido en los widgets
Por último, añade el contenido que desees a cada widget.
¿Un ejemplo? Puedes usar un widget de texto para mostrar el email y el de Simple Social Icons para las redes sociales, como ves en la imagen siguiente:
Pero te invito a insertar el contenido que mejor cumpla tu objetivo.
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 tu child theme de Genesis no lo incorpora, ahora ya sabes cómo añadirla a Genesis Sample o cualquier otro child theme de Genesis realizando pequeñas modificaciones.
¿No lo consigues?
Déjame los detalles y el nombre de la plantilla donde te interesa aplicarlo en los comentarios.
Así podré crear un tutorial personalizado con tu pregunta. Ventajas de ser suscriptor.😉