0 Comentarios
Crear una web visualmente atractiva está bien, pero si además es fácil de navegar, ahí es cuando empieza a brillar de verdad. Una de las claves para lograrlo es tener un menú de navegación que permanezca visible mientras el usuario hace scroll. Y sí, eso es justo lo que vamos a ver hoy: cómo hacer que el menú se quede fijo en HTML, paso a paso, sin complicarte la vida.
Porque lo sabemos: estás montando tu primera web, has oído hablar de los menús fijos o "sticky menus", y no sabes ni por dónde empezar. Pues bien, en esta guía vamos a resolverte esa duda y de paso, darte algunos consejos extra que te vendrán genial para mejorar la experiencia de usuario.
Vamos al grano: fijar un menú significa que, aunque el usuario baje por la página, el menú sigue visible en la parte superior (o donde lo hayas colocado). Es como decirle: “Oye, no te muevas de aquí”.
Técnicamente se consigue con un par de líneas de CSS o JavaScript, pero detrás hay un motivo más importante: no hacer que el usuario tenga que subir arriba cada vez que quiera ir a otra sección.
Te lo decimos sin rodeos: tener un menú fijo mejora la usabilidad. Pero no solo eso:
Facilita la navegación, sobre todo en páginas largas.
Reduce el rebote porque los usuarios encuentran lo que buscan más rápido.
Da un aspecto más moderno y profesional al diseño.
Aumenta las conversiones (sí, si vendes algo, esto importa).
En móviles también puede funcionar, pero ahí hay que ser más fino, porque el espacio es limitado. Luego hablaremos de eso.
Vale, entramos en materia. Hay varias formas de conseguir este efecto, dependiendo de lo que busques:
position: fixedEsta es la más sencilla, y lo mejor es que no necesitas tocar nada de JavaScript. Basta con añadir esto a tu menú:
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
¿Y ya está? Pues sí. Esto hará que el menú se quede arriba del todo y no desaparezca aunque el usuario haga scroll. Eso sí, asegúrate de añadir algo de margen arriba al resto del contenido para que no se esconda detrás del menú.
En este caso, la estructura es igual de importante que el estilo. Algo como esto:
<body>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav><main>
<!-- contenido principal -->
</main>
</body>
Y en tu CSS, aplicas lo anterior. Es importante que el nav esté antes que el main, y que uses un z-index alto para que no se solape mal.
Si lo que quieres es que el menú aparezca al hacer scroll hacia arriba o se oculte dinámicamente, ahí sí necesitas JavaScript.
let lastScrollTop = 0;
const menu = document.querySelector("nav");window.addEventListener("scroll", () => {
let currentScroll = window.pageYOffset;
if (currentScroll > lastScrollTop) {
menu.style.top = "-80px"; // se oculta
} else {
menu.style.top = "0"; // se muestra
}
lastScrollTop = currentScroll;
});
Este tipo de efectos son comunes en sitios más dinámicos, y bien usados, pueden mejorar la experiencia. Pero cuidado: si los usas mal, pueden marear.
Vamos a hacer un pequeño proyecto mini para que puedas probarlo tú mismo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Menú fijo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav><main>
<section style="height:2000px;">Contenido de prueba</section>
</main>
</body>
</html>
.menu {
position: fixed;
top: 0;
width: 100%;
background: #333;
padding: 1em 0;
z-index: 1000;
}.menu ul {
list-style: none;
display: flex;
justify-content: center;
gap: 2em;
}.menu a {
color: white;
text-decoration: none;
font-weight: bold;
}
No te olvides de los móviles. Un menú fijo en pantallas pequeñas puede ocupar mucho espacio. Usa media queries:
@media (max-width: 768px) {
.menu ul {
flex-direction: column;
gap: 1em;
}
}
¿Un consejo? Si tu menú es largo o con submenús, plantéate un hamburger menu con JavaScript.
Todos hemos metido la pata alguna vez con esto. Aquí van los fallos típicos:
Olvidar añadir margen al contenido, y que se quede tapado por el menú.
No usar z-index, y que otros elementos lo oculten.
Hacerlo fijo en móviles sin optimizarlo.
No probarlo en varios navegadores (¡sorpresa, no siempre se ve igual!).
Y lo más común: abusar del menú fijo cuando no hace falta. Eso nos lleva al siguiente punto...
Hay situaciones en las que el menú fijo es muy útil:
Pero también hay casos donde mejor evitarlo:
Como siempre, todo depende del contexto y de lo que quieras que haga el usuario.
Para inspirarte un poco, puedes fijarte en:
Apple: su menú fijo en móviles es sutil, claro y útil.
Airbnb: el menú cambia según la sección, pero siempre da acceso a lo importante.
Medium: en artículos largos, deja el menú superior fijo solo en desktop.
Lo importante es que el menú no moleste, sino que acompañe.
No si lo haces solo con CSS. JavaScript puede afectar si no está bien optimizado.
No, necesitas al menos CSS. HTML solo estructura, no posiciona.
Sí, position: fixed está soportado desde hace años. Pero prueba siempre.
Puedes fijar todo el bloque o dividir el header en dos. Depende del diseño.
Y hasta aquí la guía. Esperamos que ahora sepas exactamente cómo hacer que el menú se quede fijo en HTML, y además entiendas cuándo y por qué usarlo. Es un pequeño cambio, pero con gran impacto.
Por cierto, si te estás peleando con tu código y prefieres que nos encarguemos nosotros, puedes confiar en nuestro servicio de diseño web en Alicante. Nos encanta ayudarte a que tu web funcione (y luzca) como debe.
¿Qué te ha parecido este artículo?