Como combinar a barra de menus da área de trabalho e do celular com Divi

Na publicação Divi de hoje, vamos compartilhar uma dica rápida que o ajudará a aprimorar seus designs móveis. Todos nós sabemos que o seu design no celular é tão importante quanto no desktop, mas por causa de algumas configurações padrão no Divi, nem todas as alterações feitas no Theme Customizer têm a mesma aparência no Desktop e no celular.

O que vamos fazer neste post, especificamente, é mostrar a você como criar uma barra de menu móvel menor que se parece com a barra de menu na área de trabalho ao usar a altura máxima do logotipo e a altura mínima do menu. Por padrão, as perspectivas no celular e no desktop são diferentes. Só porque você definiu uma determinada altura do menu e altura máxima do logotipo, isso não significa que o mesmo se aplicará a dispositivos móveis.

A diferença para celular e desktop

Existem muitos sites que optam deliberadamente por ter uma barra de menu principal com menos altura. Ele apenas parece mais elegante e ocupa menos espaço, algo que é definitivamente interessante de considerar se você também estiver usando a navegação fixa.

Quando você escolhe o valor mais alto para a altura máxima do logotipo (que é 100) em seu personalizador de tema, e o valor mais baixo para a altura do menu (que é 30), você terá o seguinte resultado no desktop:

No entanto, as proporções do logotipo e a altura do menu são diferentes para dispositivos móveis. Se você selecionou o valor mais alto para a altura máxima do logotipo e o valor mais baixo para a altura do menu, você não terá o mesmo resultado que tem no desktop. O resultado que você obterá, em vez disso, terá a seguinte aparência:

Resultado

Agora, o que vamos fazer é mostrar como aplicar o mesmo layout à barra de menus do seu celular. Isso significa que o logotipo terá sua altura máxima no menu. Além disso, a própria barra de menu será bem menor. Eventualmente, você terá mais espaço sobrando na tela para que o conteúdo de sua página apareça.

Depois de seguir este tutorial passo a passo, você alcançará o seguinte resultado:

Que obviamente se parece mais com a versão para desktop:

Como combinar a barra de menus da área de trabalho e do celular com Divi

Inscreva-se no nosso canal no Youtube

Configurações da barra de menu principal

A primeira coisa que faremos é fazer as alterações necessárias na barra de menus principal dentro do personalizador de temas. Se você estiver no painel do WordPress, vá para Aparência> Personalizar> Cabeçalho e navegação> Barra do menu principal e certifique-se de que as seguintes configurações sejam aplicadas:

• Ocultar imagem do logotipo: Desativar
• Altura do menu: 30
• Altura máxima do logotipo: 100

Código CSS Adicional da Barra de Menu Móvel

A próxima coisa que precisaremos fazer é adicionar algum código CSS adicional para fazer com que a barra de menus móvel tenha a mesma aparência que a barra de menus no desktop. Podemos escolher adicionar o código CSS a uma página em particular (se quisermos apenas mostrar o menu dessa forma em apenas algumas páginas) ou a todo o site. Normalmente, você aplicará o código CSS a todo o site para manter a consistência necessária em seu site, mas isso é com você.

Adicionar código CSS a uma página em particular

Para adicionar o código CSS a uma página em particular, você terá que abrir a página no painel do WordPress. Ao usar o Divi builder, você terá que clicar no seguinte ícone dentro dele:

Em seguida, você pode pegar as seguintes linhas de código CSS e colocá-las no campo CSS personalizado:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Adicionar código CSS a todo o site

A outra possibilidade, e provavelmente a que será mais usada, é adicionar o código a todo o seu site. Existem duas maneiras de fazer isso.

Através do Customizador de Tema

O primeiro método consiste em adicionar o código CSS ao seu Theme Customizer. Para fazer isso, vá para o Painel do WordPress> Aparência> Personalizar> CSS adicional> Coloque as seguintes linhas de código CSS no campo CSS personalizado:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Esta opção permite que você veja as mudanças acontecerem em tempo real. Esta é provavelmente a escolha mais interessante se você for alterar algumas coisas no código e quiser ver como fica antes de salvar as alterações.

Por meio das opções de tema

O segundo método consiste em adicionar o código CSS às Opções de tema. Para fazer isso, vá para o Painel do WordPress> Divi> Opções de tema> Role para baixo na guia Geral e coloque o seguinte código CSS no campo CSS personalizado:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Modifique o código de acordo com suas preferências

Obviamente, esta não é a única maneira de fazer com que a barra de menus móvel se pareça. Se você estiver aplicando configurações diferentes à sua barra de menu principal no personalizador de temas, é muito provável que você também precise fazer as alterações no código CSS. No entanto, as classes CSS e os IDs CSS que você usará são os mesmos.

Uma das coisas que você definitivamente terá que levar em consideração, entretanto, é o preenchimento superior do contêiner da página. O valor que atribuímos em nosso código CSS corresponde às outras alterações que fizemos. No entanto, se você alterar os valores nas outras classes, terá que se certificar de que o preenchimento superior permanece correto. A maneira mais fácil de fazer isso é começar com um valor mais alto e modificar o valor até observar o contêiner da página se encaixar.

Resultado

Se você seguiu este tutorial passo a passo, deve ter conseguido o seguinte resultado para a barra de menus do seu celular:

Que se parece quase exatamente com o resultado obtido em desktops:

Antes de fazer qualquer alteração de CSS, o resultado no celular fica assim:

Pensamentos finais

Nesta postagem, mostramos como tornar a barra de menus do seu celular menor e ajustada à barra de menus em desktops. Você pode simplesmente adicionar o código CSS necessário a uma página em particular ou a todo o site para fazer esse método funcionar. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!