Cabecera fija gratis en el tema Astra

Las cabeceras fijas, que siguen al usuario a medida que navega por tu página hacia abajo de tu contenido ofrecen una oportunidad constante de ofrecer tus servicios, otros contenidos o lo que tengas en tus menús.

Da igual el tema que utilices, si tienes la oportunidad de hacer que la cabecera se quede fija, acompañando la navegación de los usuarios, tienes un fantástico gancho de marketing a mano.

Además, es muy fácil, y no hace mucho vimos cómo hacer fija la cabecera de cualquier tema.

¿Por qué Astra?

Muchos temas tienen ya esta funcionalidad de hace fija la cabecera, como Divi, o la versión Pro, de pago, del tema Astra, un fantástico tema que cada vez utilizo más y es el que siempre recomiendo a mis alumnos, por su rendimiento, carga rápida y capacidades de personalización, incluso en la versión gratuita..

Ya hablaré más de este tema, una auténtica revolución, pues recientemente Astra ha sido el primer tema – no por defecto – en superar el millón de instalaciones.

Cómo hacer fija la cabecera en el tema Astra

Si no tienes ganas de adquirir la licencia Pro de Astra solo por esta funcionalidad no es necesario, solo tienes que hacer este pequeño truco.

Abre el personalizador de WordPress, bien desde la portada de tu sitio en el icono «Personalizar» de la barra de administración, o desde el escritorio de WordPress, en «Apariencia > Personalizar», da igual.

Una vez ahí ve a la sección llamada «CSS adicional» y añade el siguiente código:

/* Cabecera fija Astra */
.main-header-bar {
    position: fixed;
    top: 0;
    width: 100%;
}
/*Ajustar relleno del contenido*/
.site-content {
    padding-top: 75px;
}
/*Ajustar relleno del contenido en moviles*/
@media (max-width: 800px) {
    .site-content {
        padding-top: 175px;
    }
}
/*Ajustar relleno del contenido en moviles*/
@media (max-width: 650px) {
    .site-content {
        padding-top: 200px;
    }
}

Cuando publiques los cambios pasarás de la cabecera estándar de Astra…

A una cabecera fija como esta:

Extra: Cabecera fija de Astra semitransparente

Para terminar de rizar el rizo, puedes hacer que la cabecera fija de Astra sea semitransparente y, de paso, aplicarle un color de superposición.

Solo tendrías que añadir el siguiente código:

/* Cabecera fija Astra semitransparente */
.main-header-bar {
    background: rgba(40, 118, 157,.5);
}

Por supuesto, cambiando los valores rgba a los que tú quieras o se adapten mejor al diseño de tu web.

Con los valores anteriores se vería así…

Espero que te haya gustado este sencillo tutorial.

Pronto habrá más trucos y guías sobre el tema Astra, que como te decía me está encantando.

 

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(11 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

4 comentarios en “Cabecera fija gratis en el tema Astra”

  1. Fernando Brines

    Buen tutorial, Fernando. Muchas gracias. He seguido tus instrucciones, y funciona bastante bien.
    Tengo alguna duda: estoy utilizando la cabecera transparente (sobre una foto oscura). Cuando me muevo hacia abajo, la cabecera se queda fija pero, al ser transparente, no se ve bien sobre el contenido en blanco que hay por debajo de la foto principal.
    ¿Hay alguna manera de cambiar el fondo de la cabecera cuando se hace scroll hacia abajo?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido