Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Cómo crear un menú sticky o "pegajoso" en WordPress

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Final product image
What You'll Be Creating

Los menús de navegación están evolucionando. En lugar de simplemente lanzar uno cualquiera en un sitio sin considerar qué forma tomará, los diseñadores se toman el tiempo necesario para reflexionar sobre el diseño de los menús de navegación, el espacio que ocupan en la página y cómo interactúan los usuarios con ellos.

Una tendencia creciente son los menús sticky o "pegajosos". Se trata de menús que permanecen en la parte superior de la ventana del navegador cuando el usuario se desplaza hacia abajo.

De esta manera, por mucho que el usuario se desplace hacia la parte inferior de la página, el menú seguirá siendo accesible, lo que le facilitará a gente la navegación por el sitio.

En este tutorial, aprenderás cuando añadir (y cuando no) un menú sticky y cómo añadir el código al tema.

Cuándo utilizar menús sticky

Los menús sticky no siempre son la más adecuado. Son más útiles en menús pequeños compuestos por sola línea, sin submenús, que se encuentren en la parte superior de la página.

Aquí tienes algunos ejemplos de eficaces menús sticky.

El sitio web de Apple tiene un sencillo menú sin elementos desplegables. Ocupa muy poco espacio en la parte superior de la página, por lo que es un candidato ideal para un menú sticky.

apple home page scrolled down showing sticky menu

El sitio Ted Baker también tiene un menú sticky de una única línea. En este caso, el sitio utiliza un mega menú para que se expanda cuando se pasa el cursor sobre uno de los elementos.

Ted Baker home page with sticky menu

Pero hay casos en los que un menú sticky no funcionaría. Por ejemplo, el sitio web de Guardian tiene una gran cabecera, con el menú bajo ella. Si el menú se hubiese hecho sticky, significaría que este y la cabecera ocuparían demasiado espacio en la pantalla.

The guardian website doesnt have a sticky menu

El sitio de IBM cuenta con un menú con elementos desplegables en la parte superior de la pantalla. Este sitio no utiliza un menú pegajoso, probablemente debido a que cuenta con menús desplegables, que no siempre funcionan bien cuando son añadidos a un menú pegajoso.

IBM menu at top of screen - not sticky

El mejor contexto en el que usar un menú pegajoso es cuando este está en la parte superior de la pantalla y es un menú simple de una sola línea. Como puedes ver en los ejemplos anteriores, esto puede funcionar con un mega menú, pero es necesario manejar esto con cuidado. Si el usuario pasa accidentalmente el cursor sobre un menú pegajoso mientras se desplaza hacia abajo, y de repente aparece el mega menú, la experiencia de usuario no será muy buena.

Añadir un menú pegajoso a tu tema: Introducción

Ahora, echemos un vistazo al código que necesitas usar para que tu menú de navegación sea pegajoso.

Necesitarás lo siguiente:

  • Un tema que puedes editar (ver más abajo).
  • Una instalación de desarrollo de WordPress: ¡no intente esto en su sitio en vivo!
  • Un editor de código.
  • Acceso a los archivos de tu tema.

Voy a trabajar en un tema que desarrollé yo mismo. Si usas un tema de terceros, asegúrate de crear un tema hijo y añadir cualquier edición en ese tema. Si editas el tema de terceros en sí, perderás los cambios la próxima vez que lo actualices.

El código inicial

Este es el sitio en el que voy a trabajar:

A website with a single-line navigation menu at the top in a blue band

Si me desplazo hacia abajo, el menú desaparece:

The site scrolled down with no menu visible

Quiero editar el CSS para el menú de forma que permanezca en la parte superior de la página cuando se desplaza.

Aquí está el código que añade mi menú al sitio, el cual está dentro del archivo header.php de mi tema:

Este código contiene una serie de elementos:

  • El fondo de la navegación y la cabecera, que es de ancho completo.
  • El propio elemento de encabezado, que tiene CSS para la anchura (width).
  • El título y la descripción del sitio.
  • El menú de navegación.

Utiliza CSS de mi tema para el diseño, flotaciones y colores, como las clases .right y .left para la flotación.

Aquí tienes el CSS para los principales elementos de ese banner de la cabecera:

Los elementos que están flotando uno junto al otro (el título y la descripción del sitio y el menú) utilizan CSS para la flotación y la anchura que no es específica de estos elementos:

Tu estilo será diferente a esto, pero incluirá estilo para los fondos, las anchuras y la flotación de alguna manera. Si estás creando un tema hijo para un tema de terceros, tómate un tiempo y examina la hoja de estilos existente para saber qué modificas con el CSS de tu tema hijo.

Hacer que el menú sea pegajoso

Ahora vamos a añadir el código para que nuestro menú sea pegajoso. El elemento al que quiero dirigirme es el elemento .header-bg, que contiene todo lo demás.

En tul tema, busca el elemento que representa el fondo del menú o el propio menú en caso de que no esté envuelto dentro de otra cosa. Puede haber un elemento header implicado en algún lugar. Esta es la razón por la que vale la pena utilizar una instalación de desarrollo de WordPress, ¡es posible que necesites experimentar!

Una vez hayas encontrado el elemento de nivel superior que debe pegarse a la parte superior de la página, añádelo:

Esto hace el trabajo necesario para fijar el menú a la parte superior de la página, o para hacerlo pegajoso:

sticky menu overlapping content at top of screen

Sin embargo, hay un problema. El menú se superpone al contenido situado bajo él, en la parte superior de la pantalla. Cuando me desplazo hacia abajo esto no es evidente, pero cuando me desplazo hasta la parte superior de mi pantalla, la primera línea de texto queda oculta.

Esto se debe a que el posicionamiento .fixed del menú lo ha sacado del flujo normal del HTML a medida que se representa, lo que significa que el navegador representa cualquier HTML que venga a continuación en la parte superior de la pantalla.

Vamos a arreglarlo. Para ello, necesitamos añadir un margen a la parte superior del siguiente elemento, que ser trata de un div con la clase .main. También necesitamos establecer una altura para el menú pegajoso y así asegurarnos de que será igual a ese margen.

Para hacer esto bien, necesito interrogar el CSS de los elementos dentro del elemento .header-bg, para poder averiguar cómo se calcula la altura.

Los elementos .header-bg y header no tienen altura establecida y tienen relleno (padding) superior e inferior y márgenes con un valor de cero. Si desmenuzo más, puedo descubrir que los elementos de la lista dentro del menú sí tienen relleno:

El tamaño de fuente para el texto es el mismo que para el elemento body, por lo que podemos considerar que es 1em. Lo que nos da una altura total de la barra de cabecera de 3em.

Aquí está el CSS ajustado:

Ten en cuenta que he sobrecalificado div.main en lugar de usar .main. Esto se debe a que este tema utiliza también la clase .main en el menú principal (nav.main). Si esto es o no necesario en tu caso dependerá de la forma en que esté codificado tu tema.

El menú ahora aparece encima del contenido como debería ser:

nav menu above content

Y cuando me desplazo hacia abajo, el menú (y el resto de la cabecera) permanece fijo en su posición:

The sticky menu is fixed in place when I scroll down

¡Así es como creas tu menú de navegación sticky!

Un menú pegajoso puede mejorar la experiencia del usuario y modernizar tu sitio

Si tu sitio tiene un menú sencillo en la parte superior de la pantalla, convertirlo en un menú pegajoso usando esta técnica hará que su acceso y la navegación por el sitio sea más fácil para los usuarios, esté en el punto que estén de la pantalla.

Pero si su menú es muy grande, o está debajo de los elementos de encabezado que ocuparán demasiado espacio, un menú pegajoso puede ocupar demasiado espacio en la pantalla y restar experiencia de usuario.

Es tu turno, aunque un menú pegajoso es más fácil de añadir de lo que te imaginas.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.