{"id":3272,"date":"2025-10-06T16:09:25","date_gmt":"2025-10-06T14:09:25","guid":{"rendered":"https:\/\/tecnologia.euroinnova.com\/en-que-consiste-un-menu-sticky-y-como-implementarlo-en-una-web\/"},"modified":"2025-10-07T14:52:35","modified_gmt":"2025-10-07T12:52:35","slug":"sticky-menu","status":"publish","type":"post","link":"https:\/\/tecnologia.euroinnova.com\/en\/sticky-menu","title":{"rendered":"What is a sticky menu and how to implement it on a website?"},"content":{"rendered":"<p>Actualmente, la <strong>experiencia del usuario<\/strong> dentro de una p\u00e1gina web es uno de los elementos m\u00e1s importantes, tanto para disciplinas como el SEO, pero tambi\u00e9n para que exista una mayor conversi\u00f3n. Y claro, dentro de un sitio web, una de las partes m\u00e1s relevantes es el men\u00fa que, al hacer scroll, podemos perder de vista. Sin embargo, podemos establecer un <strong>men\u00fa sticky<\/strong> **que permanezca siempre en nuestro campo de visi\u00f3n.<\/p>\n<p>Utilizar un <strong>men\u00fa sticky, fijo, adhesivo o pegajoso<\/strong> es una de las pr\u00e1cticas m\u00e1s extendidas en la actualidad. En Euroinnova, queremos entender el por qu\u00e9, adem\u00e1s de transmitirte una serie de ejemplos y de buenas pr\u00e1cticas para que implementes este elemento en tu web. Y es que, como ver\u00e1s, existen casos en los que no es tan recomendable.<\/p>\n<p>Are you ready? Let's get started!<\/p>\n<h2 id=\"que-es-un-menu-sticky\"><strong>\u00bfQu\u00e9 es un men\u00fa sticky?<\/strong><\/h2>\n<p>A <strong>men\u00fa sticky<\/strong>, <strong>men\u00fa adhesivo<\/strong> o <strong>header sticky<\/strong>, consiste en la barra de navegaci\u00f3n 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\u00fa es que asegura un acceso continuo y r\u00e1pido a las opciones principales que se presentan en el men\u00fa, sin importar la ubicaci\u00f3n del usuario.<\/p>\n<p>De cara al SEO, el men\u00fa sticky es muy positivo porque mejora la <strong>accesibilidad para el usuario.<\/strong> En consecuencia, es normal que muchas webs mejoren m\u00e9tricas como el <strong>tiempo de permanencia<\/strong> o la <strong>tasa de rebote.<\/strong><\/p>\n<p><strong>\u00bfY c\u00f3mo se implementa un men\u00fa sticky?<\/strong> Como es l\u00f3gico, para hacerlo se necesitar\u00e1n conocimientos b\u00e1sicos de <strong>dise\u00f1o web<\/strong> y <strong>CSS.<\/strong> Y es que para crear un sticky menu tenemos que usar la propiedad position: sticky. Aun as\u00ed, y como veremos m\u00e1s adelante, existe la posibilidad de usar constructores como <strong>Elementor<\/strong> o <strong>Divi<\/strong> para implementarlo en <strong>WordPress.<\/strong><\/p>\n<h3 id=\"ejemplos-de-menus-adhesivos\"><strong>Ejemplos de men\u00fas adhesivos<\/strong><\/h3>\n<p>Lo primero que vamos a ver es que existen <strong>3 tipos de men\u00fas sticky.<\/strong> Aunque la opci\u00f3n de fijar este men\u00fa en la parte superior de la web es la m\u00e1s frecuente, contamos con otras opciones que, quiz\u00e1s, para tu proyecto o web pueden ser interesantes.<\/p>\n<ul>\n<li><strong>Men\u00fa adhesivo superior fijo:<\/strong> como su nombre indica, se trata de anclar el men\u00fa en la zona superior de la p\u00e1gina.<\/li>\n<li><strong>Men\u00fa adhesivo fijo en el lado izquierdo:<\/strong> en este caso, como, por ejemplo, en Kayak, se usa para que los usuarios puedan cambiar y navegar en funci\u00f3n de las necesidades que tengan. Por ello, se suele colocar en el lado izquierdo.<\/li>\n<li><strong>Men\u00fa adhesivo fijo en el lado derecho:<\/strong> utilizado mayormente en blogs como InVision, permite que el usuario pueda navegar por las distintas categor\u00edas y encontrar posts de contenido que le interesen.<\/li>\n<\/ul>\n<h3 id=\"sitios-webs-donde-el-menu-sticky-es-comun\"><strong>Sitios webs d\u00f3nde el men\u00fa sticky es com\u00fan<\/strong><\/h3>\n<p><strong>\u00bfEn qu\u00e9 webs encaja m\u00e1s el men\u00fa sticky?<\/strong> 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\u00fa se encontrar\u00eda de nuevo a un golpe de scroll.<\/p>\n<p>As\u00ed, estos son los sitios webs en los que recomendamos incluir este sticky men\u00fa.<\/p>\n<h3 id=\"e-commerce\"><strong>E-commerce<\/strong><\/h3>\n<p>Imagina por un momento que llegas a un comercio electr\u00f3nico, navegas por diferentes productos, a\u00f1ades algunos a la cesta, pero luego tienes que volver hasta el principio para llegar a la cesta o para cambiar de categor\u00eda. Por ello, el <strong>men\u00fa adhesivo<\/strong> es positivo en este tipo de webs, porque permite una constante navegaci\u00f3n sin que el usuario se sienta perdido o no encuentre su cesta. \u00a1La ver\u00e1 en todo momento!<\/p>\n<h3 id=\"blogs-de-noticias-o-tendencias\"><strong>Blogs de noticias o tendencias<\/strong><\/h3>\n<p>Otro ejemplo de sitio web en el que encaja a la perfecci\u00f3n un men\u00fa sticky es en <strong>los blogs y las noticias.<\/strong> Con este elemento, el usuario podr\u00e1 navegar por las distintas categor\u00edas al terminar de leer una noticia, sin tener la necesidad de hacer scroll hasta el principio.<\/p>\n<h3 id=\"paginas-de-servicios\"><strong>P\u00e1ginas de servicios<\/strong><\/h3>\n<p>Las p\u00e1ginas en las que se detallan los servicios suelen ser p\u00e1ginas muy largas, en las que se enumera qu\u00e9 incluye, se introducen testimonios y otros elementos. Por ello, mantener el men\u00fa como un <strong>elemento sticky<\/strong> ayudar\u00e1 al usuario cuando quiera saber de otro servicio.<\/p>\n<h2 id=\"estructura-html-de-un-menu-sticky\"><strong>Estructura HTML de un men\u00fa sticky<\/strong><\/h2>\n<p>Para crear la <strong>estructura HTML de un men\u00fa sticky<\/strong> necesitaremos de algunas etiquetas b\u00e1sicas, adem\u00e1s de <strong>aplicar estilos en CSS<\/strong> que permitan que el men\u00fa, a efectos pr\u00e1cticos, se mantenga en una posici\u00f3n fija cuando el usuario se desplace por la p\u00e1gina.<\/p>\n<p>As\u00ed, la estructura debe comenzar con una <strong>etiqueta &lt;nav&gt;<\/strong> para la barra de navegaci\u00f3n. Este ser\u00eda un ejemplo b\u00e1sico de la estructura HTML de un men\u00fa adhesivo:<\/p>\n<div style=\"background-color: #f3f4f6; border-radius: .75rem; padding: 1rem;\">\n<pre>&lt;header class=\"sticky-header\"&gt;<br>&lt;nav class=\"sticky-menu\"&gt;<br>&lt;ul&gt;<br>&lt;li&gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;\/a&gt;&lt;\/li&gt;<br>&lt;li&gt;&lt;a href=&quot;#about&quot;&gt;About us&lt;\/a&gt;&lt;\/li&gt;<br>&lt;li&gt;&lt;a href=&quot;#services&quot;&gt;Servicios&lt;\/a&gt;&lt;\/li&gt;<br>&lt;li&gt;&lt;a href=&quot;#contact&quot;&gt;Contacto&lt;\/a&gt;&lt;\/li&gt;<br>&lt;\/ul&gt;<br>&lt;\/nav&gt;<br>&lt;\/header&gt;<\/pre>\n<\/div>\n<p>Para que un men\u00fa sea sticky, tambi\u00e9n debe utilizarse con la propiedad <strong>position: sticky.<\/strong> De esta manera, le decimos al c\u00f3digo que fije el men\u00fa en la parte superior cuando el usuario se desplaza por la p\u00e1gina web. Aqu\u00ed te dejamos un ejemplo:<\/p>\n<div style=\"background-color: #f3f4f6; border-radius: .75rem; padding: 1rem;\">\n<pre>.sticky-header {<br>position: -webkit-sticky; \/* Para navegadores webkit *\/<br>position: sticky;<br>top: 0;<br>background-color: #fff;<br>z-index: 1000;<br>}<\/pre>\n<\/div>\n<h2 id=\"mejores-practicas-con-los-menus-sticky\"><strong>Mejores pr\u00e1cticas con los men\u00fas sticky<\/strong><\/h2>\n<p>A continuaci\u00f3n, te queremos acercar una serie de buenas pr\u00e1cticas a seguir a la hora de implementar el men\u00fa sticky en tu p\u00e1gina web. Por ejemplo, resulta muy positivo que esta barra de navegaci\u00f3n tenga un <strong>dise\u00f1o simple y minimalista,<\/strong> 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\u00f3viles.<\/p>\n<p>El men\u00fa sticky <strong>debe ser claro<\/strong>, teniendo elementos relevantes como las secciones principales o accesos directos importantes. Por otro lado, tambi\u00e9n resulta interesante construir un men\u00fa <strong>que cambie de color o se destaque al ser activado.<\/strong> De esta manera, los usuarios siempre lo tendr\u00e1n presente en su navegaci\u00f3n.<\/p>\n<p>Implementar un sticky men\u00fa <strong>puede afectar a la velocidad de carga de la p\u00e1gina<\/strong>, por lo que tambi\u00e9n es recomendable hacer pruebas de velocidad. Para solucionar este tipo de problema, puede ser \u00fatil usar herramientas de optimizaci\u00f3n web y verificar el rendimiento del <strong>sticky menu Elementos<\/strong> o <strong>Divi sticky menu<\/strong>, sobre todo, en WordPress.<\/p>\n<h2 id=\"como-crear-un-menu-sticky-en-wordpress\"><strong>\u00bfC\u00f3mo crear un men\u00fa sticky en WordPress?<\/strong><\/h2>\n<p><strong>Crear un men\u00fa sticky en WordPress<\/strong> es mucho m\u00e1s sencillo que hacerlo a trav\u00e9s del c\u00f3digo de la web. Actualmente, existen herramientas como Elementor o Divi, con las que puedes crear un men\u00fa adhesivo sin necesidad de saber sobre c\u00f3digo. Aun as\u00ed, otra forma de construir un men\u00fa sticky es a trav\u00e9s de los <strong><a href=\"https:\/\/tecnologia.euroinnova.com\/en\/crear-plugin-wordpress\/\" target=\"_blank\" rel=\"noopener\">plugins<\/a>,<\/strong> como \u201cSticky Menu (or Anything!)\u201d y \u201cmyStickymenu\u201d.<\/p>\n<p>Para aterrizar esta informaci\u00f3n, te explicamos <strong>c\u00f3mo implementar un men\u00fa en Elementor.<\/strong> Tan solo debes abrir el editor de p\u00e1gina y seleccionar la cabecera. En la pesta\u00f1a de configuraci\u00f3n avanzada, activa la opci\u00f3n \u201csticky\u201d y define algunos ajustes como la visibilidad y los dispositivos en los que se habilitar\u00e1.<\/p>\n<p>Otra de las formas de crear un men\u00fa adhesivo personalizado en WordPress es a trav\u00e9s del c\u00f3digo CSS. Tan solo tendr\u00e1s que aplicar <strong>position: sticky<\/strong> a la clase CSS de la cabecera y establecer <strong>top: 0<\/strong> para que el men\u00fa no se mueva de la parte superior.<\/p>","protected":false},"excerpt":{"rendered":"<p>Actualmente, la experiencia del usuario dentro de una p\u00e1gina web es uno de los elementos m\u00e1s importantes, tanto para disciplinas [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":897,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categorizar"],"acf":[],"_links":{"self":[{"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/posts\/3272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/comments?post=3272"}],"version-history":[{"count":0,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/posts\/3272\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/media\/897"}],"wp:attachment":[{"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/media?parent=3272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/categories?post=3272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/en\/wp-json\/wp\/v2\/tags?post=3272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}