Consertando Seu Menu de Navegação Responsivo no Divi

Pode ser difícil criar um menu de navegação responsivo que tenha uma ótima aparência em todos os tamanhos de tela. Gostaria que não fosse tão importante, mas como a navegação normalmente fica no topo de todas as páginas do seu site, é o que fica visível primeiro em todas as páginas. Portanto, é importante acertar. Felizmente, o personalizador de tema do Divi permite que você personalize o menu principal com algumas opções de cabeçalho bem legais. Mas para o estilo de menu padrão com o logotipo à esquerda e os links de menu à direita, as coisas podem ser facilmente embaralhadas em tamanhos de tela menores, especialmente quando você tem muitos links aglomerando o cabeçalho. Eu sei que isso acontece muito comigo. Eu obtenho o menu com a aparência correta para desktop e então você o verifica em um tablet (especialmente um iPad Pro) e o logotipo está se sobrepondo ao menu e alguns dos links saltaram uma linha.

Hoje, vou lhe dar algumas soluções úteis para esses menus de navegação lotados, de forma que tenham uma ótima aparência, mesmo nos tamanhos de tela não tão comuns. Afinal, pelo menos para alguns usuários, a credibilidade do seu site depende disso.

Vamos começar.

Consertando Seu Menu de Navegação Responsivo no Divi

Inscreva-se no nosso canal no Youtube

Quatro soluções para um menu de navegação lotado

Uma das melhores coisas sobre o Divi é que ele é construído em um layout de grade fluida que usa consultas de mídia (CSS compartimentado) para ajustar o estilo do seu site para diferentes tamanhos de tela. O ponto em que esses ajustes são feitos é o que chamamos de pontos de interrupção. Se você está empenhado em aperfeiçoar seu menu de navegação principal em TODOS os tamanhos de tela, é provável que você precise personalizar seu menu usando consultas de mídia e ajustar certos pontos de interrupção.

O problema

O problema mais comum que encontro ao usar o menu de navegação padrão do Divi é quando um cliente deseja muitos itens de menu de nível superior. Ter mais de 5 itens de menu (ou ter itens de menu com um tamanho de fonte grande) no menu de navegação principal geralmente cria uma quebra de linha e um logotipo ampliado quando o tamanho da tela atinge uma largura entre 980-1100 pixels (o tamanho de pequenos laptops e tablets grandes). Tenho certeza de que você já teve esse problema antes, mesmo que nunca tenha notado. É mais ou menos assim:

Não é ideal. Portanto, vamos examinar quatro soluções para esse problema.

Solução # 1: Aumente a largura da barra de menus

Normalmente, eu não sugeriria aumentar a largura total do seu menu de navegação, a menos que eu também estivesse aumentando a largura total do resto do meu site. Eu acho que a consistência no design é importante. Mas às vezes é um bom compromisso se isso significa que seu menu de navegação parece ótimo em todos os dispositivos. E é uma solução simples também.

Vá para Personalizador de tema> Cabeçalho e navegação> Barra de menus principal e selecione Ampliar largura .

Solução 2: Ajuste as configurações de logotipo e fonte.

Outra solução simples para o seu problema é usar as configurações do personalizador de tema para ajustar as opções padrão de altura máxima do logotipo, tamanho do texto ou fonte.

Tenha cuidado ao ajustar essas opções porque você nunca quer comprometer o design e a legibilidade de seu logotipo ou itens de menu para fazer uma correção fácil.

Solução # 3: Exibir o menu móvel em um novo ponto de interrupção.

Aqui estão os intervalos gerais para cada um dos pontos de interrupção no Divi:

Desktop grande: 1405 px e superior
Desktop padrão: entre 1100 px e 1405 px
Laptops e tablets grandes: entre 980 px e 1100 px
Tablets: entre 768 px e 980 px
Smartphones e tablets pequenos: entre 320px e 768px;
Smartphones: entre 320px e 480px;

O ponto de interrupção no qual o menu de navegação padrão se transforma em menu móvel (com a navegação de hambúrguer) é de 980 px. Qualquer tamanho de tela menor que 980 px mostrará o menu do celular.

Mas, se quiser evitar quebras de linha de menu estranhas, altere o ponto de interrupção para um valor diferente. Digamos que você queira exibir o menu móvel em cerca de 1024 px em vez de 980 px. Para fazer isso, você precisa inserir algum CSS personalizado dentro de uma consulta de mídia para substituir o estilo padrão em Divi.

Vá para Personalizador de tema > CSS adicional e digite o seguinte:

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

Essa consulta à mídia faz duas coisas. Ele oculta o menu normal e exibe o menu móvel no ponto de interrupção de 1024px.

Solução # 4: Ajustando o estilo do menu em um determinado ponto de interrupção

Esta solução é provavelmente a melhor opção porque permite que você tenha o máximo controle sobre o seu menu em determinados pontos de interrupção. Você pode direcionar seus itens de menu usando sua classe css para criar um estilo personalizado em sua consulta de mídia.

Aqui está o CSS padrão da Divi para seus itens de menu:

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

Digamos que você queira que o tamanho da fonte do menu seja 18px por padrão, mas deseja que ele mude para 14px em um determinado ponto de interrupção. E para economizar ainda mais espaço, você pode reduzir o preenchimento para 15 px em vez de 22 px. Você pode fazer isso direcionando a classe css para todos os itens de menu e criando uma consulta de mídia

Vá para Personalizador de tema> CSS adicional e digite o seguinte:

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

O que este CSS faz é alterar o tamanho da fonte para 14 px e o preenchimento correto para 15 px em qualquer tela de 1200 px ou menos. Isso cria uma transição suave ao ajustar o tamanho da tela na área de trabalho e permite que você mantenha a navegação padrão em tablets grandes e laptops pequenos.

Ajustando outros estilos de cabeçalho

Existem cinco estilos de cabeçalho para escolher no Theme Customizer do Divi (sem contar a navegação vertical). Os cinco estilos incluem Padrão (o que já foi abordado nesta postagem) Slide-in, Tela inteira, Centralizado e Logotipo embutido centralizado.

Estilos de slide e tela inteira

Se o design de seu site exige os estilos slide in ou fullscreen, seu menu responsivo é bastante infalível, pois o ícone de hambúrguer de navegação móvel é usado para acionar o menu em todos os tamanhos de tela.

Estilo Centrado

Se estiver usando o estilo centralizado, você terá mais espaço para os itens do menu respirarem, mas se ainda precisar de mais espaço, você pode usar as mesmas soluções personalizadas que usamos para o estilo padrão para deixá-lo da maneira que você deseja.

Estilo do logotipo em linha centralizado

Por último, o cabeçalho de estilo do logotipo embutido centralizado é um pouco complicado de acertar desde o início. Você precisa acertar algumas coisas se quiser que o logotipo seja centralizado na página. Primeiro, você precisa ter um número par de itens de menu para que o logotipo do meio continue a ser a peça central.

Em segundo lugar, a quantidade de texto que você usa para cada item do menu determinará o ponto central do logotipo. Se você tiver mais texto de um lado, o logotipo ficará um pouco desviado. Isso não é um grande problema para a maioria das situações, mas se você tiver um cabeçalho com elementos centralizados diretamente sob o logotipo, pode ser um problema óbvio que você precisará corrigir.

Observe como o logotipo está um pouco fora do centro no menu em comparação com o logotipo centralizado na seção do cabeçalho.

Agora vou encurtar o rótulo do item de menu “Elementos de informação” para “Informações”. Agora veja como o logotipo se desloca mais para o centro.

Essa solução pode ser tudo de que você precisa para obter o logotipo onde deseja. Você pode conseguir mudar algo como “Sobre nós” para “Sobre” ou vice-versa para fazer esses pequenos ajustes.

Mas, isso pode ser um pouco frustrante se você for um perfeccionista (eu posso ter meus momentos disso. Acredite em mim.) Portanto, há um nível mais profundo de personalização que você pode fazer se quiser fazer ainda mais ajustes. Em vez de ajustar o texto real no item de menu para ajustar o ponto central do logotipo, você pode adicionar uma classe css personalizada a qualquer item e dar a ele algum preenchimento à direita ou à esquerda. Isso deve lhe dar o último empurrão de que você precisa para ter tudo centralizado.

No painel do wordpress, vá para Aparência> Menus e certifique-se de que as Classes CSS estejam marcadas na área Opções de tela.

Em seguida, alterne para abrir o item de menu que deseja segmentar. Em seguida, insira uma classe CSS na caixa de entrada Classes CSS. Estou chamando o meu de “cutucada”.

Depois disso, vá para Divi> Theme Customizer> Additional CSS e adicione o seguinte CSS personalizado:

#top-menu li.nudge  {
padding-right: 32px;
}

Com este css, apenas o item com a classe “nudge” recebe um preenchimento correto de 32px; Isso empurra o logotipo apenas o suficiente para centralizá-lo.

É isso!

Reflexões finais

Divi torna a construção de sites divertida e fácil. Mas, às vezes, as demandas do trabalho (e de nossos clientes) exigem que façamos um esforço extra para garantir que nossos sites sejam estelares. E o que separa bons sites de ótimos sites são os pequenos detalhes. O desempenho do seu menu de navegação responsivo é um dos detalhes importantes que você deseja acertar. Na maioria das vezes, é a primeira coisa que os usuários verão e com a qual se envolverão em todas as páginas do seu site. Um menu com aparência quebrada pode deixar uma má primeira impressão. Espero que este post ajude a “cutucar” você na direção certa (desculpe, não pude evitar :)).

Tenho certeza de que existem mais problemas e soluções que não abordamos neste post. Sinta-se à vontade para postá-los nos comentários. Estou ansioso para ouvir de você.

Saúde!