Impedir que os menus do Navi+ se sobreponham a outros aplicativos
Por que isso será um problema?
Em muitos casos, você precisará usar vários aplicativos incorporados em seu site. Isso pode causar um problema de usabilidade comum, pois os elementos da interface podem se sobrepor (veja a imagem abaixo). Um exemplo simples é quando você usa frequentemente um aplicativo de chat como Shopify Inbox ou WhatsApp. Normalmente, esses aplicativos de chat ocupam uma posição proeminente no canto inferior direito da tela do telefone. Quando você decide usar o Navi+ para melhorar significativamente a navegação em seu site, esse problema surge. Aqui estão algumas maneiras de resolver esse problema.
Solução 1: Ajustar a posição dos botões flutuantes (Demonstração com Shopify inbox)
Solução 2: Configurar o padding do menu do Navi+ para evitar sobreposição com aplicativos.
Padding e margin são ferramentas amplamente utilizadas e poderosas na tecnologia, especialmente em HTML5/CSS. Ao definir o padding de acordo com a posição daquela área, você pode evitar a sobreposição de aplicativos. Você também pode definir a distância do menu do Navi+ até as bordas ajustando a margin.
Solução 3: Substituir Barras Inferiores por Barras Superiores/Barras de Suporte ou Botões de Ação Flutuantes
Embora a Barra Inferior seja a ferramenta mais eficaz para guiar os usuários, usada por quase todos os aplicativos nativos móveis, ou web móvel (mais lento), às vezes você pode querer colocar seu menu do Navi+ em uma posição diferente, como no topo (Barra Superior), direita/esquerda (Barra de Suporte), flutuando acima da interface (botão de ação flutuante). Ou você pode combiná-los para a melhor eficiência de navegação. Confira as seguintes opções do Navi+ para entender como fazer isso, às vezes leva apenas 1s, e você resolverá seu problema.
Z-index - priorizando a ordem de exibição de “aplicativos flutuantes”
A propriedade z-index especifica a ordem de empilhamento de um elemento. Um elemento com uma ordem de empilhamento maior está sempre na frente de um elemento com uma ordem de empilhamento menor. Veja a imagem abaixo para entender mais.
O z-index padrão para o menu do Navi+ é definido como 50 para todos, pois ‘não nos consideramos mais importantes do que outros aplicativos’, mas 50 também é o número suficiente para exibir bem em todos os temas do Shopify. Às vezes, você pode precisar ajustar o z-index do seu menu do Navi+ nos seguintes casos:
- Quando você usa vários menus do Navi+ em uma página e deseja que eles se sobreponham, mas um menu aparece acima dos outros.
- Quando há outros objetos/aplicativos sobrepondo seu menu do Navi+, nesse caso, o z-index resolverá tudo.
Há uma pergunta desafiadora: qual z-index você deve configurar para o seu menu do Navi+ para evitar sobreposição conforme desejado? Se você tiver vários menus do Navi+, pode organizá-los de acordo com suas preferências sem se preocupar – é por isso que estamos construindo o Navi+ para ser o mais versátil possível para os atuais ‘aplicativos flutuantes’ no Shopify.
Se você precisar configurar o z-index para o seu menu do Navi+ para lidar com conflitos com outros aplicativos, pode pesquisar seu z-index de um mínimo de 0 a um máximo de 2.147.483.647. Isso pode parecer um pouco difícil, mas é a maneira mais fácil e melhor porque o z-index não afetará a exibição da sua interface além do problema que você está enfrentando. Se você tem experiência com depuração de CSS e HTML – isso é fácil, basta ativar o modo de inspeção para ver qual z-index o aplicativo em conflito possui. Ou, a maneira mais fácil, basta clicar no ícone de chat do Crisp para conversar com um consultor do Navi+; ficaríamos felizes em ajudá-lo com esse problema.