Oferta SiteGround Black Friday

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.

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 24

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en las redes sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

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

Sobre el autor

15 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?

  2. Excelente solucion, me fue de gran ayuda.
    Solo una consulta, si para movil deseo que la cabecera no sea fija, como cambiaria el código CSS.

    Gracias
    Carlos J.

  3. Javier González

    Hola Fernando podrás revisar ese código css, No funciona en Astra debido a una actualización del tema, si tienes otra opción por favor podrás colocarlo aquí

      1. JAVIER GONZÁLEZ

        Hola fernando acabo de ingresar a wp-admin y vi una actualización de astra.

        actualice el tema a la versión 3.4.3 y aun me presenta problemas con la cabecera fija en versión movil.

        seguiré investigando a ver que puede ser

        Gracias

  4. Hola Fernando,
    Este código me viene fenomenal para fijar la cabecera principal, pero me ocurre lo siguiente que tengo un pequeño menu sobre la cabecera y ese no se queda fijo. Puedes indicarnos el código para fijarlo también.

    Te lo agradecería enormemente.

  5. Hola Fernado, muchas gracias por el tutorial. Podrías indicarme cómo hacer que cuando se hace scroll se mueva también el submenú porque si bien en el pc se ve bien, en el móvil se queda arriba y no baja, además no se ve el menú completo, no se si es que se queda detrás de la cabecera.
    Muchas gracias

Deja un comentario

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

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Scroll al inicio