Cómo arreglar problemas con anclajes HTML en menús fijos

Las cabeceras fijas son un patrón de diseño común que mantiene los elementos esenciales de los menús de navegación al alcance de la mano a medida que los usuarios se desplazan por una página.

Mantener una cabecera fijo mientras el usuario se desplaza puede liberar espacio horizontal para dispositivos más pequeños evitando las barras laterales, y mantiene visible tu marca.

Los anclajes HTML son otra herramienta de navegación importante, ya que enlazan no a una página sino a una ubicación específica de la misma.

Ya sea para un artículo largo, varias partes de la entrada o la navegación dentro de una página dividida en secciones, los anclajes pueden ayudar a los usuarios a navegar directamente a la parte de una página que desean ver.

Los enlaces dentro de una página son un caso habitual a la hora de usar una cabecera fija.

Los usuarios que siguen los enlaces de otras webs y aterrizan directamente en un anclaje de tu web no pueden ver tu marca, la navegación de tu sitio, o incluso a qué sitio han llegado.

Incluir una cabecera fija les ayudará a ver hasta dónde han navegado, sin importar a dónde lleguen en la página de destino.

Desafortunadamente, el enlazado interno y una cabecera fija plantean un problema cuando se utilizan juntos.

El problema con los anclajes y las cabeceras fijas

Y es que cuando coinciden un anclaje a un punto concreto de la página y una cabecera fija, que sigue la navegación del usuario, ocurren problemas de usabilidad.

El más común es que la cabecera quede justo encima del anclaje, impidiendo ver parte del texto enlazado, o incluso todo el contenido.

Solución a problemas de usabilidad con anclajes HTML y cabeceras fijas

La solución es sencilla, bueno, las soluciones, pues te propongo 2.

Añadir clase CSS al anclaje

Si estás utilizando el editor de bloques es muy fácil añadir una clase CSS al anclaje, solo tienes que ponerle un nombre, como ya vimos en el artículo sobre anclajes HTML en el editor de bloques, y añadirle una clase CSS adicional, con el nombre que quieras.

En el ejemplo le he puesto de nombre «ancla», para no complicar la cosa.

Si, por el contrario, utilizas el editor clásico, lo único que tienes que hacer a la hora de añadir el anclaje HTML es incluirle directamente la clase CSS, así:

Esto es un encabezado

¡Y ahora la magia!

Ya solo queda configurar la clase CSS. Para ello ve al personalizador de WordPress, por ejemplo desde «Apariencia > Personalizar».

Una vez en el personalizador ve a la sección llamada «CSS adicional» y añade lo siguiente:

.ancla { padding-top: 90px; }

Esto hará que al navegar hasta tu anclaje HTML se añada un

padding

de 90 píxeles para que nunca se sobreponga la cabecera fija sobre el contenido del mismo.

Por supuesto, puedes adaptar el margen a más o menos píxeles, hasta que el ajuste sea perfecto, pues depende del tamaño en altura de tu cabecera, algo que cambia según el tema que tengas instalado.

Añadir CSS que solucione el problema en todos los anclajes

La otra manera sería simplemente añadir algo de CSS adicional que evite que ocurran estos problemas de usabilidad con las cabeceras fijas.

Así que si eliges este método, de nuevo, abre el personalizador de WordPress y añade lo siguiente en la sección de «CSS adicional»:

:target::before {
  content: "";
  display: block;
  height: 90px; /* aquí la altura de la cabecera fija*/
  margin: -90px 0 0; /* altura negativa de la cabecera fija */
}

Como siempre, juega con los valores de altura positiva y negativa de la cabecera fija, hasta que se adapte a la perfección.

Otra posibilidad, que funciona en todos los navegadores, sería así:

a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

Más soluciones

Como cada web es un mundo, en este enlace tienes un montón de otros posibles códigos (CSS, jQuery, JS) para dar solución a este problema con los anclajes HTML y las cabeceras fijas, según cada situación.

 

La entrada Cómo arreglar problemas con anclajes HTML en menús fijos la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Laura D´Cuero

Copywriter, Redactora de Content SEO.
Laura D´Cuero
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

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