¿En qué consiste un menú sticky y cómo implementarlo en una web?

Actualmente, la experiencia del usuario dentro de una página web es uno de los elementos más importantes, tanto para disciplinas como el SEO, pero también para que exista una mayor conversión. Y claro, dentro de un sitio web, una de las partes más relevantes es el menú que, al hacer scroll, podemos perder de vista. Sin embargo, podemos establecer un menú sticky **que permanezca siempre en nuestro campo de visión.

Utilizar un menú sticky, fijo, adhesivo o pegajoso es una de las prácticas más extendidas en la actualidad. En Educa Open, queremos entender el por qué, además de transmitirte una serie de ejemplos y de buenas prácticas para que implementes este elemento en tu web. Y es que, como verás, existen casos en los que no es tan recomendable.

¿Estás preparado? ¡Comenzamos!

¿Qué es un menú sticky?

Un menú sticky, menú adhesivo o header sticky, consiste en la barra de navegación superior que vemos en cualquier web, pero con la diferencia de que permanece visible en la parte superior, aunque el usuario haga scroll hacia abajo. Lo positivo de este tipo de menú es que asegura un acceso continuo y rápido a las opciones principales que se presentan en el menú, sin importar la ubicación del usuario.

De cara al SEO, el menú sticky es muy positivo porque mejora la accesibilidad para el usuario. En consecuencia, es normal que muchas webs mejoren métricas como el tiempo de permanencia o la tasa de rebote.

¿Y cómo se implementa un menú sticky? Como es lógico, para hacerlo se necesitarán conocimientos básicos de diseño web y CSS. Y es que para crear un sticky menu tenemos que usar la propiedad position: sticky. Aun así, y como veremos más adelante, existe la posibilidad de usar constructores como Elementor o Divi para implementarlo en WordPress.

Ejemplos de menús adhesivos

Lo primero que vamos a ver es que existen 3 tipos de menús sticky. Aunque la opción de fijar este menú en la parte superior de la web es la más frecuente, contamos con otras opciones que, quizás, para tu proyecto o web pueden ser interesantes.

• Menú adhesivo superior fijo: como su nombre indica, se trata de anclar el menú en la zona superior de la página.
• Menú adhesivo fijo en el lado izquierdo: en este caso, como, por ejemplo, en Kayak, se usa para que los usuarios puedan cambiar y navegar en función de las necesidades que tengan. Por ello, se suele colocar en el lado izquierdo.
• Menú adhesivo fijo en el lado derecho: utilizado mayormente en blogs como InVision, permite que el usuario pueda navegar por las distintas categorías y encontrar posts de contenido que le interesen.

Sitios webs dónde el menú sticky es común

¿En qué webs encaja más el menú sticky? Como te hemos comentado, se trata de un elemento que aporta a la experiencia del usuario, pero puede haber casos en los que su uso no sea necesario. Esto ocurre, sobre todo, en webs que no son largas y que el menú se encontraría de nuevo a un golpe de scroll.

Así, estos son los sitios webs en los que recomendamos incluir este sticky menú.

E-commerce

Imagina por un momento que llegas a un comercio electrónico, navegas por diferentes productos, añades algunos a la cesta, pero luego tienes que volver hasta el principio para llegar a la cesta o para cambiar de categoría. Por ello, el menú adhesivo es positivo en este tipo de webs, porque permite una constante navegación sin que el usuario se sienta perdido o no encuentre su cesta. ¡La verá en todo momento!

Blogs de noticias o tendencias

Otro ejemplo de sitio web en el que encaja a la perfección un menú sticky es en los blogs y las noticias. Con este elemento, el usuario podrá navegar por las distintas categorías al terminar de leer una noticia, sin tener la necesidad de hacer scroll hasta el principio.

Páginas de servicios

Las páginas en las que se detallan los servicios suelen ser páginas muy largas, en las que se enumera qué incluye, se introducen testimonios y otros elementos. Por ello, mantener el menú como un elemento sticky ayudará al usuario cuando quiera saber de otro servicio.

Estructura HTML de un menú sticky

Para crear la estructura HTML de un menú sticky necesitaremos de algunas etiquetas básicas, además de aplicar estilos en CSS que permitan que el menú, a efectos prácticos, se mantenga en una posición fija cuando el usuario se desplace por la página.

Así, la estructura debe comenzar con una etiqueta <nav> para la barra de navegación. Este sería un ejemplo básico de la estructura HTML de un menú adhesivo:

<header class="sticky-header">
<nav class="sticky-menu">
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Sobre nosotros</a></li>
<li><a href="#services">Servicios</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
</header>

Para que un menú sea sticky, también debe utilizarse con la propiedad position: sticky. De esta manera, le decimos al código que fije el menú en la parte superior cuando el usuario se desplaza por la página web. Aquí te dejamos un ejemplo:

.sticky-header {
position: -webkit-sticky; /* Para navegadores webkit */
position: sticky;
top: 0;
background-color: #fff;
z-index: 1000;
}

Mejores prácticas con los menús sticky

A continuación, te queremos acercar una serie de buenas prácticas a seguir a la hora de implementar el menú sticky en tu página web. Por ejemplo, resulta muy positivo que esta barra de navegación tenga un diseño simple y minimalista, sin muchas distracciones para el usuario. Un header sticky que contiene muchos elementos y que ocupa demasiado espacio puede ser muy molesto, sobre todo en dispositivos móviles.

El menú sticky debe ser claro, teniendo elementos relevantes como las secciones principales o accesos directos importantes. Por otro lado, también resulta interesante construir un menú que cambie de color o se destaque al ser activado. De esta manera, los usuarios siempre lo tendrán presente en su navegación.

Implementar un sticky menú puede afectar a la velocidad de carga de la página, por lo que también es recomendable hacer pruebas de velocidad. Para solucionar este tipo de problema, puede ser útil usar herramientas de optimización web y verificar el rendimiento del sticky menu Elementos o Divi sticky menu, sobre todo, en WordPress.

¿Cómo crear un menú sticky en WordPress?

Crear un menú sticky en WordPress es mucho más sencillo que hacerlo a través del código de la web. Actualmente, existen herramientas como Elementor o Divi, con las que puedes crear un menú adhesivo sin necesidad de saber sobre código. Aun así, otra forma de construir un menú sticky es a través de los plugins, como “Sticky Menu (or Anything!)” y “myStickymenu”.

Para aterrizar esta información, te explicamos cómo implementar un menú en Elementor. Tan solo debes abrir el editor de página y seleccionar la cabecera. En la pestaña de configuración avanzada, activa la opción “sticky” y define algunos ajustes como la visibilidad y los dispositivos en los que se habilitará.

Otra de las formas de crear un menú adhesivo personalizado en WordPress es a través del código CSS. Tan solo tendrás que aplicar position: sticky a la clase CSS de la cabecera y establecer top: 0 para que el menú no se mueva de la parte superior.