Cómo crear un menú flotante para móvil con Elementor 2021

menú flotante para móvil

Indice de Contenidos

Menú Flotante para la versión móvil de tu web

Tener una página responsive es imperativo hoy en día. El móvil es el dispositivo que nos acompaña siempre, por eso es muy importante que la web este preparada, diseñada y pensada para que sea fácil de utilizar en Smartphones.

El primer paso es hacer que nuestro menú este al alcance del pulgar. Existen varios plugins que hacen este trabajo. Pero ya sabes «Cuantos más plugins  tengas en la recamara, más tardara la pagina en cargar» por eso, si nos podemos ahorrar uno, bienvenido sea.

  1. Empezamos con el Theme Builder

Lo primero es lo primero. Entramos en la pestaña de Plantillas, que esta justo debajo de Elementor. Nos vamos a Theme Builder, después a Añadir Nuevo.

En la sección de tipo de plantilla, escogemos Header y, le ponemos nombre que queramos.

menu flotante1
menu flotante2

  1. Diseña tu menú

Elementor tiene varias plantillas, utiliza la que más te guste, o empieza una desde cero. Una vez tengas el menú listo, vamos a ver cómo se ve en los diferentes dispositivos.

Menú Escritorio

menu flotante4

Menú Tablet

menu flotante5

Para el menú de escritorio elige la distribución que más te guste. Por ejemplo el logo a la izquierda y un menú horizontal la derecha.

Para el menú en Tablet, Elementor te da la opción de que  aparezca contenido en un botón de «menú hamburguesa»  igual como se vería en móvil.

Nosotros te recomendamos que para tablet, dejes el menú como en el escritorio, pero con una distribución diferente como por ejemplo, el logo arriba y el menú horizontal debajo.

  1. Personaliza tu menú para móvil

  1. Personaliza tu menú para móvil

Ahora viene lo bueno, por defecto el menú para móvil, se vera cómo un botón hamburguesa en la parte superior de la pantalla.

Este es el momento para darle estilo con Elementor, para esta tarea nos vamos a la pestaña de estilo. usaremos estas dos opciones:

»Dropdown: Esta opción nos deja personalizar cómo se vera el menú, una vez lo despleguemos haciendo clic en el botón hamburguesa.

»Toggle Button: Esta nos permite cambiar la forma, el color y tamaño del botón.

menu flotante10
menu flotante7

  1. Encontrar la etiqueta CSS

Después de tener nuestro botón con el diseño que queremos, solo nos falta ponerlo a la altura del pulgar. De esta manera será más fácil navegar por el menú con una sola mano.

Para esto lo primero que debemos hacer es, buscar el nombre de la clase CSS del contenedor donde esta el botón. Esto es muy importante, debemos localizar la sección que acoge el botón del menú. Solo de esta manera podremos editar su posición.

Bueno, después de esta charla, te contamos como encontrarlo: primero nos vamos al modo de vista previa, hacemos clic con el botón derecho y escogemos la opción de Inspeccionar.

Veras una ventana con el código de la pagina, otra cosa importante es poner la vista en móvil, esto lo consigues dandole al botón de la izquierda, donde puedes elegir los diferentes tipos de dispositivos.

Hecho esto busca la clase CSS del contenedor donde esta el botón y cópiala porque la necesitaremos para el siguiente paso.

menu flotante8
  1. Personaliza el Código CSS

  1. Personaliza el Código CSS

¡¡Y llegamos al final!! Una vez tengamos localizado cómo se llama el contenedor donde esta alojado el botón, nos vamos a las opciones avanzadas y hacemos click en CSS personalizado. 

Solo con estas tres lineas de código tendrás tu Menú Responsive para móvil:

.Aquí va la clase css {
position:fixed;
bottom:10px;
right:12px}.

menu flotante9

Por supuesto puede editar estas lineas para que el botón este donde tú quieras. Te explicamos para que sirve cada uno de las propiedades CSS:

position:fixed Esto hace que la posición del elemento sea fijo y no se mueva al hacer scroll. 

Bottom: desplaza el elemento de su posición original, tomando como referencia el borde inferior. Solo tendrá efecto si el objeto tiene  un valor de relative, fixed o absolute. Se puede expresar en pixeles o porcentajes.

Right: Desplaza el elemento tomando como referencia su borde derecho. Se puede poner los valores en pixeles o porcentajes.

2 respuestas

  1. Hola,
    La hamburguesa sale abajo a la derecha, pero cuando se abre el menú este sigue arriba como antes… teniendo que hacer scroll hacia arriba de todo para verlo. Quisiera que se vea fijado en la pantalla y cerca del botón. Hay que añadir más código?
    Muchas gracias.

    1. Hola Oscar, gracias por tu comentario.

      Para que el menú aparezca siempre, tienes que editar la sección donde esta contenido el menú, luego ir a opciones avanzadas> efectos de movimiento> sticky arriba (Esto hará que tu logo también se quede pegado a la parte superior, en caso de que quieras que solo sea el menú desplegable el que aparezca en la parte superior sigue los mismos pasos pero editando el «Nav Menu» en vez de la sección entera). También puedes editar la posición del menú desplegable en: editar nav menu> Dropdown> opciones de horizontal Padding o Vertical Padding.

      Espero que te haya servido, para cualquier duda también nos puedes escribir a nuestro WhatsApp.

Deja una respuesta

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

¡Hazlo tu Mismo!

Cómo construir tu web profesional por 121€

Advertencia sobre el uso de Cookies:

Utilizamos cookies, propias y de terceros, para garantizar la navegación por el sitio web y mejorar nuestros servicios. Si continua navegando, consideramos que consiente su uso. Acceda a nuestra Política de Cookies para obtener información adicional sobre las cookies utilizadas, su finalidad y la forma de gestionarlas.