{"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":"2026-08-05T11:06:03","modified_gmt":"2026-08-05T09:06:03","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>At present, the <strong>user experience<\/strong> On a website, this is one of the most important elements, both for areas such as SEO and for increasing conversion rates. And, of course, one of the most important parts of a website is the menu, which we can lose sight of as we scroll. However, we can set up a <strong>sticky menu<\/strong> **so that it always remains in our field of vision.**.<\/p>\n<p>Use a <strong>sticky, fixed, adhesive or tacky menu<\/strong> It is one of the most widespread practices today. At Euroinnova, we want to understand why this is the case, as well as provide you with a range of examples and best practices so that you can implement this feature on your website. However, as you will see, there are instances where it is not particularly advisable.<\/p>\n<p>Are you ready? Let's get started!<\/p>\n<h2 id=\"que-es-un-menu-sticky\"><strong>What is a sticky menu?<\/strong><\/h2>\n<p>A <strong>sticky menu<\/strong>, <strong>sticker menu<\/strong> o <strong>sticky header<\/strong>, consists of the top navigation bar that we see on any website, but with the difference that it remains visible at the top, even if the user scrolls down. The advantage of this type of menu is that it ensures continuous and quick access to the main options listed in the menu, regardless of the user\u2019s position on the page.<\/p>\n<p>From an SEO perspective, a sticky menu is very beneficial because it improves the <strong>user accessibility.<\/strong> Consequently, it is normal for many websites to improve metrics such as the <strong>residence time<\/strong> or the <strong>bounce rate.<\/strong><\/p>\n<p><strong>And how do you implement a sticky menu?<\/strong> Naturally, to do this you will need a basic understanding of <strong>web design<\/strong> y <strong>CSS.<\/strong> The fact is that to create a sticky menu, we need to use the `position: sticky` property. Even so, as we shall see later, it is possible to use constructors such as <strong>Elementor<\/strong> o <strong>Divi<\/strong> to implement it in <strong>WordPress.<\/strong><\/p>\n<h3 id=\"ejemplos-de-menus-adhesivos\"><strong>Examples of adhesive menus<\/strong><\/h3>\n<p>The first thing we\u2019re going to look at is that there are <strong>3 types of sticky menus.<\/strong> Although the option to pin this menu to the top of the website is the most common, we have other options which might be of interest for your project or website.<\/p>\n<ul>\n<li><strong>Fixed top sticky menu:<\/strong> As the name suggests, this involves pinning the menu to the top of the page.<\/li>\n<li><strong>Fixed menu on the left-hand side:<\/strong> In this case, as with Kayak, for example, it is used to allow users to switch between and navigate according to their needs. For this reason, it is usually positioned on the left-hand side.<\/li>\n<li><strong>Fixed sticky menu on the right-hand side:<\/strong> Mainly used on blogs such as InVision, it allows users to browse the various categories and find posts on topics that interest them.<\/li>\n<\/ul>\n<h3 id=\"sitios-webs-donde-el-menu-sticky-es-comun\"><strong>Websites where sticky menus are common<\/strong><\/h3>\n<p><strong>On which websites does a sticky menu work best?<\/strong> As we\u2019ve mentioned, this is a feature that enhances the user experience, but there may be cases where it isn\u2019t necessary. This is particularly true of websites that aren\u2019t very long, where the menu would reappear after just a single scroll.<\/p>\n<p>So, these are the websites where we recommend including this sticky menu.<\/p>\n<h3 id=\"e-commerce\"><strong>E-commerce<\/strong><\/h3>\n<p>Imagine for a moment that you visit an online shop, browse through different products, add a few to your basket, but then have to go right back to the start to access your basket or switch categories. That\u2019s why the <strong>sticker menu<\/strong> This is a good feature on this sort of website, as it allows for seamless browsing without the user feeling lost or being unable to find their basket. They\u2019ll be able to see it at all times!<\/p>\n<h3 id=\"blogs-de-noticias-o-tendencias\"><strong>News or trends blogs<\/strong><\/h3>\n<p>Another example of a website where a sticky menu works perfectly is at <strong>blogs and news.<\/strong> With this feature, users will be able to browse the different categories once they have finished reading a news article, without having to scroll back to the top.<\/p>\n<h3 id=\"paginas-de-servicios\"><strong>Services pages<\/strong><\/h3>\n<p>Pages detailing services tend to be very long, listing what is included, featuring testimonials and other elements. For this reason, keeping the menu as a <strong>sticky element<\/strong> It will help the user when they want to find out about another service.<\/p>\n<h2 id=\"estructura-html-de-un-menu-sticky\"><strong>HTML structure of a sticky menu<\/strong><\/h2>\n<p>To create the <strong>HTML structure of a sticky menu<\/strong> We\u2019ll need a few basic tags, as well as <strong>apply styles in CSS<\/strong> which allow the menu, for practical purposes, to remain in a fixed position whilst the user scrolls down the page.<\/p>\n<p>The structure should therefore begin with a <strong><nav> tag<\/strong> for the navigation bar. Here is a basic example of the HTML structure of a sticky menu:<\/p>\n<div style=\"background-color: #f3f4f6; border-radius: .75rem; padding: 1rem;\">\n<pre><header class=\"sticky-header\"><br><nav class=\"sticky-menu\"><br><ul><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;Services&lt;\/a&gt;&lt;\/li&gt;<br>&lt;li&gt;&lt;a href=&quot;#contact&quot;&gt;Contact&lt;\/a&gt;&lt;\/li&gt;<br><\/ul><br><\/nav><br><\/header><\/pre>\n<\/div>\n<p>For a menu to be sticky, it must also be used with the property <strong>position: sticky.<\/strong> This tells the code to keep the menu fixed at the top of the page when the user scrolls down the webpage. Here\u2019s an example:<\/p>\n<div style=\"background-color: #f3f4f6; border-radius: .75rem; padding: 1rem;\">\n<pre>.sticky-header {<br>position: -webkit-sticky; \/* For WebKit browsers *\/<br>position: sticky;<br>top: 0;<br>background-colour: #fff;<br>z-index: 1000;<br>}<\/pre>\n<\/div>\n<h2 id=\"mejores-practicas-con-los-menus-sticky\"><strong>Best practice for sticky menus<\/strong><\/h2>\n<p>Below, we\u2019d like to share a number of best practices to follow when implementing a sticky menu on your website. For example, it\u2019s a very good idea for this navigation bar to have a <strong>simple, minimalist design,<\/strong> without too many distractions for the user. A sticky header that contains too many elements and takes up too much space can be very annoying, especially on mobile devices.<\/p>\n<p>The sticky menu <strong>it must be clear<\/strong>, featuring key elements such as the main sections or important shortcuts. Furthermore, it is also worth creating a menu <strong>that changes colour or stands out when activated.<\/strong> This way, users will always bear this in mind whilst browsing.<\/p>\n<p>Implement a sticky menu <strong>may affect the page loading speed<\/strong>, so it is also advisable to carry out speed tests. To resolve this sort of problem, it may be helpful to use web optimisation tools and check the performance of the <strong>Sticky menu items<\/strong> o <strong>Divi sticky menu<\/strong>, particularly in WordPress.<\/p>\n<h2 id=\"como-crear-un-menu-sticky-en-wordpress\"><strong>How do you create a sticky menu in WordPress?<\/strong><\/h2>\n<p><strong>Creating a sticky menu in WordPress<\/strong> It\u2019s much simpler than doing it via the website\u2019s code. These days, there are tools such as Elementor or Divi, which allow you to create a sticky menu without needing to know any code. That said, another way to build a sticky menu is via the <strong><a href=\"https:\/\/tecnologia.euroinnova.com\/en\/crear-plugin-wordpress\/\" target=\"_blank\" rel=\"noopener\">plugins<\/a>,<\/strong> such as \u201cSticky Menu (or Anything!)\u201d and \u201cmyStickymenu\u201d.<\/p>\n<p>To help you understand this information, we\u2019ll explain <strong>How to set up a menu in Elementor.<\/strong> All you need to do is open the page editor and select the header. In the \u201cAdvanced settings\u201d tab, tick the \u2018sticky\u2019 option and configure settings such as visibility and the devices on which it will be enabled.<\/p>\n<p>Another way to create a custom sticky menu in WordPress is using CSS code. All you need to do is apply <strong>position: sticky<\/strong> to the CSS class of the header and set <strong>top: 0<\/strong> so that the menu stays at the top.<\/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}]}}