Cómo compensar el desplazamiento a anclajes en el tema Astra si tienes cabecera fija

Uno de los trucos más demandados de Astra es el de hacer fija la cabecera, pero tiene un problema, y es que con la cabecera fija, si tienes una tabla de contenidos y haces clic para ir a cualquiera de sus anclajes, no te llevará al punto exacto, sino que irás un poco más abajo, pues la cabecera fija quedará encima del anclaje exacto.

Pero no pasa nada, esto tiene fácil solución, solo tienes que añadir una pequeña compensación, para que los enlaces a anclajes te lleven al punto exacto, restando la altura de tu cabecera fija.

Esto se arregla con un poco de CSS, así:

/* Compensar anclajes por cabecera fija */
:target:before {
content: "";
display: block;
height: 130px; /* altura de tu cabecera fija */
margin: -130px 0 0; /* altura negativa de tu cabecera fija */
}

Este código CSS tienes que añadirlo en la sección de CSS adicional del personalizador de WordPress, cambiando los valores de height y margin por la altura en píxeles de tu cabecera fija. Guardas los cambios y ya está.

(3 votos, promedio: 5) Valora este artículo para ayudar a mejorar la calidad del blog

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

Sobre el autor

3 comentarios en “Cómo compensar el desplazamiento a anclajes en el tema Astra si tienes cabecera fija”

  1. ¡Hola Fernando! Buen truco, como habitualmente. El caso es que he estado utilizando Astra, hasta que finalmente me he cansado. Y no es cuestión de gustos. No sé si me pasa a mí sólo; pero he encontrado muchos errores últimamente: bloques que se rompen (sólo usaba los estándar y los de UAG) y hay que recuperar, ajustes que no van, montones de actualizaciones en poco tiempo… en un grupo de Telegram en el que estamos gente que habíamos participado en un curso, más gente habla de que «a esa gente de Astra le pasa algo». No sé; he empezado a utilizar Neve, y me gusta mucho; además de que sea Mobile-First (no porque lo digan ellos; se ve en sus media-queries).

    1. A veces se nos olvida que todo el sistema de bloques es un producto medio en beta, y sí, he visto bloques que dan errores y se recuperan de nuevo y vuelven a dar errores, pero en bloques concretos y da igual el tema.

      En cuanto a Astra, lo uso en cientos de sitios sin problema así que creo que es más problema de algunos bloques que de Astra

      1. Pues puede ser, no digo que no. Por poner datos concretos en la mesa, que siempre pueden dar información útil a alguien. Lo cierto es que esos errores de momento con Neve no me los he vuelto a encontrar. Y puedo decir que el bloque que más he tenido que recuperar es el estándar de HTML. Y también es curioso que las webs que hice con Astra hace ya tiempo, esas tampoco están dando problemas. Ha sido con las que he estado trabajando desde digamos mayo o junio.

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

 

Ir arriba Ir al contenido