Menú pegajoso en dispositivos móviles

El tema Extra es una plantilla de WordPress muy completa, con complementos muy superiores a otras del mercado sin necesidad de añadir plugins. Pero en algunas ocasiones necesitamos instalar alguno para conseguir nuestro propósito. En esta ocasión, para conseguir un menú pegajoso en los dispositivos móviles.

Configurar un menú pegajoso o sticky menu en el tema Extra

Esta operación se podría haber realizado con programación, insertando una acción javascript y una hoja de estilo que lo adaptara a la web, pero he creído más oportuno realizar la operación de la manera más sencilla posible, aunque tengamos que sacrificar la limpieza de nuestro tema añadiendo un plugin adicional.

Instalar el plugin "myStickymenu" (mi menú pegajoso)

No voy a entretenerme en este paso, doy por hecho que todos sabemos cómo instalar los plugins, sino os acordáis, podéis ver este vídeo.

El plugin en cuestión se llama mystickymenu y nos proporciona todo lo que necesitamos para configurar un menú pegajoso en nuestro tema Extra.

Una vez instalado y activado, se creará una nueva pestaña dentro de las opciones de Ajustes del menú de administración de WordPress.

Buscar el nombre de la etiqueta del menú

Tal vez sea la parte más engorrosa de esta operación, pero es necesaria para poder aplicar la configuración del plugin a nuestra barra de navegación.

Si estás trabajando con el tema Extra, te lo pongo fácil para que no tengas que realizar el proceso, la etiqueta que debes escribir en la primera casilla es "#et-mobile-navigation". Con esto conectamos el plugin con la barra de navegación.

Aunque sea un tutorial sobre el tema Extra, y no dejar colgados a los que puedan llegar a este artículo buscando una solución, voy a describir el proceso.

1.- Abrimos el personalizador de WordPress y seleccionamos el icono de visualización en tablet o móvil.

2.- Pinchamos en medio de la página con el botón derecho y abrimos el inspector de elementos.

3.- Buscamos el elemento que contiene la barra de navegación y apuntamos el nombre de la clase (class) o del identificador (id). Es el que tendremos que utilizar en la configuración del plugin.

Hay que fijarse bien si la etiqueta div está nombrada como clase (class) o cómo identificador (id), ya que, dependiendo de esto, haremos referencia a la etiqueta con un "." si es clase o una "#" si es identificador, escribiéndolo delante del nombre que hemos averiguado.

Configurar el plugin de menú pegajoso

Ahora que ya tenemos instalado el plugin y sabemos cómo hacer referencia a la etiqueta de la barra de navegación, nos toca configurar el plugin. Las opciones son las siguientes:

• Clase de Sticky: El nombre de la clase o id, para la plantilla Extra es "#et-mobile-navigation".
• z-index de Sticky: La posición que ocupará el menú sobre el resto de elementos (dejar por defecto).
• Color de Fondo de Sticky: El color que elijamos para nuestra web, a sentimiento (el color por defecto de Extra es #3e5062).
• Opacidad de Sticky: Si queremos que tenga algo de transparencia, no recomiendo poner mucha porque el menú sería inviable. (Aconsejo 100 para Extra).
• Tiempo de Transición de Sticky: El tiempo que tarda en aparecer, en segundos (dejar por defecto).
• Deshabilitado en Tamaños Pequeños en la Pantalla: Podemos elegir que el menú pegajoso no se active si la pantalla es muy pequeña, útil para dispositivos antiguos. Poniendo 0 siempre estará activo. (En Extra poner 0 para desactivarlo).
• Hacer visible cuando se hace scroll: Cuantos píxeles se tiene que desplazar la pantalla al hacer scroll para que aparezca el menú pegajoso. (En Extra, 100px es suficiente).
• Hacer visible cuando se hace scroll on homepage: Igual que el apartado anterior, pero podemos hacer que en la página principal actúe con otras medidas, por ejemplo si tenemos un slider. (Si no tenemos ningún elemento adicional, 100px es suficiente).
• Atenuar o deslizar efecto: La forma como queremos que aparezca, marcando la casilla aparecerá deslizándose desde arriba, y sin ella con un efecto de desvanecimiento.
• .myfixed css class: Aquí pondremos el código de las hojas de estilo para adecuarlo a nuestro tema. Para Extra dejamos el código que viene por defecto cambiando las dos primeras funciones y dejándolo como esto:

• Disable CSS style: Si deseamos crear un estilo totalmente propio, tenemos que marcar esta casilla. (Dejarlo por defecto).

Añadir un scroll si tenemos muchos enlaces en el menú

Puede pasar que nuestro menú contenga muchos enlaces y estos no aparezcan al salirse de la pantalla. La solución es muy sencilla, sólo tenemos que copiar el siguiente código en la casilla del código CSS del plugin o en la pestaña "CSS Adicional" del personalizador de WordPress.

Puedes pinchar aquí para ver todas las entradas relacionadas con esta plantilla.

---

Suscríbete para no perderte ningún artículo nuevo, te aviso por email

---

Si necesitas acceder al menú para ofrecer una navegabilidad mejorada en tu web, lo mejor es configurar un menú pegajoso. ¿Necesita saber cómo hacerlo?