Evitar que los menús de Navi+ se superpongan a otras aplicaciones
¿Por qué será un problema?
En muchos casos, necesitarás usar múltiples aplicaciones integradas en tu sitio web. Esto puede generar un problema de usabilidad habitual, ya que los elementos de la interfaz pueden superponerse (ver la imagen a continuación). Un ejemplo simple es cuando usas frecuentemente una aplicación de chat como Shopify Inbox o WhatsApp. Típicamente, estas aplicaciones de chat ocupan una posición prominente en la esquina inferior derecha de la pantalla del teléfono. Cuando decides usar Navi+ para mejorar significativamente la navegación en tu sitio web, surge este problema. Aquí hay algunas formas de abordar este problema.
Solución 1: Ajustar la posición de los botones flotantes (Demostración con Shopify Inbox)
Solución 2: Configurar el padding del menú de Navi+ para evitar superposiciones con aplicaciones.
El padding y el margen son herramientas ampliamente utilizadas y poderosas en tecnología, especialmente en HTML5/CSS. Al establecer el padding de acuerdo con la posición de esa área, puedes evitar la superposición de aplicaciones. También puedes establecer la distancia del menú de Navi+ a los bordes ajustando el margen.
Solución 3: Reemplazar las barras inferiores por barras superiores/barras de soporte o botones de acción flotantes
Aunque la barra inferior es la herramienta más efectiva para guiar a los usuarios, utilizada por casi todas las aplicaciones nativas móviles, o web móvil (más lentas), a veces puedes querer colocar tu menú de Navi+ en una posición diferente, como en la parte superior (barra superior), derecha/izquierda (barra de soporte), flotando sobre la interfaz (botón de acción flotante). O puedes combinarlas para la mejor eficiencia de navegación. Consulta las siguientes opciones de Navi+ para entender cómo hacerlo, a veces solo toma 1 segundo, y resolverás tu problema.
Z-index - priorizando el orden de visualización de “aplicaciones flotantes”
La propiedad z-index especifica el orden de apilamiento de un elemento. Un elemento con un mayor orden de apilamiento siempre está delante de un elemento con un menor orden de apilamiento. Ver la imagen a continuación para entender más.
El z-index predeterminado para el menú de Navi+ está configurado en 50 para todos, ya que ‘no nos consideramos más importantes que otras aplicaciones’, pero 50 también es el número suficiente para mostrarse bien en todos los temas de Shopify. A veces, es posible que necesites ajustar el z-index de tu menú de Navi+ en los siguientes casos:
- Cuando usas múltiples menús de Navi+ en una página y deseas que se superpongan, pero un menú aparece por encima de los otros.
- Cuando hay otros objetos/aplicaciones superponiéndose a tu menú de Navi+, en cuyo caso, el z-index resolverá todo.
Hay una pregunta desafiante: ¿qué z-index deberías configurar para tu menú de Navi+ para evitar superposiciones como deseas? Si tienes múltiples menús de Navi+, puedes organizarlos según tus preferencias sin preocuparte, por eso estamos construyendo Navi+ para que sea lo más versátil posible para las actuales ‘aplicaciones flotantes’ en Shopify.
Si necesitas configurar el z-index para tu menú de Navi+ para manejar conflictos con otras aplicaciones, puedes buscar tu z-index desde un mínimo de 0 hasta un máximo de 2,147,483,647. Esto puede parecer un poco difícil, pero es la forma más fácil y mejor porque el z-index no afectará la visualización de tu interfaz más allá del problema que estás enfrentando. Si tienes experiencia con la depuración de CSS y HTML, esto es fácil, solo activa el modo de inspección para ver qué z-index tiene la aplicación en conflicto. O, la forma más fácil, simplemente haz clic en el ícono de chat de Crisp para chatear con un asesor de Navi+; estaremos encantados de ayudarte con este problema.