Menú pegajoso en dispositivos móviles

por | 7 Comentarios

Temas Elegant Themes

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.

Suscríbete:

 

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.

my sticky menu plugin

 

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.

Menú pegajoso. Visualizar Tablet o móvil

 

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

Menú pegajoso. Inspeccionar

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.

Menú pegajoso. Nombre de etiqueta

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.

 

Temas Elegant Themes

 

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?

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

7 Comentarios

  1. Alex

    Te dejo un enlace de una pagina que soluciona el tema pero es para el tema divi para extra no funciona

    Responder
    • Juan

      Hola Alex, no había pensado en la posibilidad de más links en el menú, pero podemos aprovechar el enlace que has enviado para actualizar el artículo. El código CSS que muestra la página es correcto y lo vamos a utilizar, pero lo que no coincide, al ser un tema diferente, es la etiqueta que hace referencia al menú. Sustituyendo «.et_mobile_menu» por «.myfixed nav» funciona bien. Puedes copiar el código en las opciones del plugin o en la pestaña CSS Adicional del personalizador de WorPress.

      Responder
      • Alex

        Me perdí amigo no se que quieres decir

        Responder
      • Alex

        Si lo pudieras explicar en un video seria fantastico yo no lo consigo se me desconfigura el menu

        Responder
        • Alex

          Vale ya lo consegui crei que era solo utilizando el codigo pero es utilizando el plugin que dices queda increible muchas gracias

          Responder
  2. Alex

    Hola fantástico funciona es lo que te dije ayer pero hay un problema y es que el menu si tiene mas de 7 opciones(menu largo) o bien que tenga subpaginas no se puede ver por que no te deja bajar mas abajo del menu vamos no se ven

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido