• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Añadir una barra superior y encoger la cabecera al hacer scroll en Genesis Sample

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 y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

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 snippet al fichero functions.php o a tu plugin de funcionalidades:

Para ver este código y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

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.

widgets izquierda derecha barra superior Genesis Sample
Nuevos widgets de la barra superior.

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 1805 snippets de esta web,
identifícate o suscríbete aquí.

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:

widgets barra superior Genesis Sample
Añadir widgets a barra superior.

Pero te invito a insertar el contenido que mejor cumpla tu objetivo.

añadir barra superior Genesis Sample
Resultado de añadir barra superior Genesis Sample.

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.😉

Cabecera CSS Genesis Framework Genesis Sample Javascript PHP

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?