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.
Índice de contenidos
¿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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Sos un Genio Fernando, hace mucho que te sigo y recibo tus boletines, aprendo mucho contigo, muchas gracias.
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?
Lo investigo porque es cierto que «falta» un ajuste (como sí tiene Divi) para que la cabecera transparente al hacer scroll deje de serlo
Lo he solucionado poniendo la cabecera «semitransparente». Queda bastante bien.
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.
Tengo la pregunta contraria, y si solo lo quisiera usar en movil?? Como sería el codigo?? Muchas gracias.
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í
Lo revisaré, gracias por avisar
Excelente
No funciona es en versión móvil allí es el problema.
Pero en versión escritorio si funciona
Acabo de probarlo con la última versión de Astra y funciona perfectamente, en escritorio y móviles.
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
Yo también actualicé ayer y probé después y funciona bien
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.
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
Brutal!!!!
Una pregunta más… Sabrías cómo fijar la imagen de cabecera encima del menú en lugar de a la izquierda?