Como adicionar um cabeçalho fixo personalizado para celular usando Divi
Publicados: 2017-09-01Ter um cabeçalho fixo (ou navegação) no celular pode aumentar a usabilidade do seu site, se feito corretamente. A navegação fixa em geral parece ser 22% mais rápida do que os cabeçalhos padrão. Neste mundo de alta velocidade da tecnologia, essa é uma estatística considerável, mesmo que fosse a metade disso.
E, com o Divi, adicionar um cabeçalho fixo ao seu site pode ser feito com algumas linhas de CSS. Divi já permite que você personalize seus cabeçalhos móveis usando o Theme Customizer, mas atualmente não há nenhuma configuração embutida para implantar um cabeçalho fixo para dispositivos móveis. Neste tutorial, vou mostrar como adicionar um cabeçalho fixo personalizado no celular que inclui o seguinte:
- Um logotipo diferente (mais compatível com dispositivos móveis) do que sua versão para desktop.
- Um cabeçalho mais curto para permitir mais espaço de visualização disponível.
- Um ícone de navegação de hambúrguer clicável maior para facilitar a implantação do navegador móvel.
- Um fundo semitransparente que torna o cabeçalho ainda mais intrusivo ao visualizar o site.
Aqui está uma pequena amostra da aparência do cabeçalho.
A configuração
Esta configuração é semelhante ao meu post anterior sobre como trocar seu logotipo em um cabeçalho fixo. Antes de começar, certifique-se de completar o seguinte:
- Certifique-se de ter a versão mais recente do Divi instalada.
- Crie um menu principal ativo para o seu site.
- No backend do seu site WordPress, vá para Theme Customizer> Header & Navigation> Header Format e certifique-se de ter o estilo de cabeçalho padrão selecionado.
- Faça duas versões do seu logotipo com 200 × 131 e adicione-as à sua biblioteca de mídia do WordPress. Um logotipo será usado para o cabeçalho principal e outro será usado para o cabeçalho fixo. Se possível, torne a versão do cabeçalho fixo do logotipo mais horizontal para que não seja esmagado verticalmente no cabeçalho fixo menor. Aqui está um exemplo do meu logotipo do cabeçalho principal que estou usando.
Aqui está um exemplo do meu logotipo de cabeçalho fixo. Observe que recortei o texto para fazer um logotipo mais simples e horizontal que se encaixa perfeitamente em um cabeçalho com menos altura. É improvável que alguém consiga ler esse texto de qualquer maneira e a marca ainda está sendo representada. 
- Configure seu menu principal com itens de menu.
Uma vez que iremos adicionar CSS customizado para realizar o cabeçalho fixo, não precisamos personalizar o cabeçalho padrão ou as opções de cabeçalho fixo no Customizador de Tema. Mas, se você deseja duplicar as configurações para tamanhos de menu e logotipo em meu exemplo, complete o seguinte (isso é totalmente opcional):
Vá para as configurações de Cabeçalho e Navegação no Customizador de Tema. Selecione a barra de menu principal e atualize o seguinte:
Altura do menu: 105
Altura máxima do logotipo: 80
Tamanho do texto: 20
Agora volte para Cabeçalho e Navegação. Selecione Configurações de navegação fixa e atualize o seguinte:
Altura fixa do menu: 60
Tamanho do texto: 20
Depois de concluir essas etapas, você está pronto para começar.
Como adicionar um cabeçalho fixo personalizado para celular usando Divi
Inscreva-se no nosso canal no Youtube
Começando
Implementaremos este design inserindo CSS customizado na seção CSS Adicional no Customizador de Tema Divi. Como vamos segmentar apenas dispositivos móveis, vamos envolver todo o nosso CSS em uma consulta de mídia que limita o estilo a larguras de navegador menores que 980 px. Vá em frente e comece digitando o seguinte na caixa CSS adicional:
@media (max-width: 980px) {
}
Criando seu cabeçalho fixo móvel usando CSS
Como Divi já adiciona uma classe chamada “et-fixed-header” quando o usuário rola a página para baixo, podemos usar esse seletor em nosso CSS personalizado para criar e estilizar nosso cabeçalho fixo móvel.
Este primeiro grupo de CSS abaixo torna o cabeçalho fixo (ou aderente) no topo da página e então ajusta a altura do cabeçalho fixo para 55px. Ele também adiciona uma cor de fundo branco semitransparente. Adicione o seguinte ao seu CSS Adicional no Customizador de Tema dentro dos colchetes da Consulta de Mídia.
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
A Apple sugere que todos os elementos da IU clicáveis para seus aplicativos tenham pelo menos 44 × 44 pixels para que nossos polegares e dedos possam clicar neles facilmente. Este seria um bom guia para os elementos do cabeçalho fixo móvel. O CSS a seguir torna o ícone de navegação de 45 pixels.
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
Por último, vamos adicionar mais altura para nosso logotipo no cabeçalho fixo para que possamos vê-lo melhor. Insira o seguinte CSS:
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
É isso! Todos nós terminamos.
Aqui está a coleção final de CSS para criar seu cabeçalho fixo móvel:
@media (max-width: 980px) {
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
}
Salve suas configurações. Agora você tem um cabeçalho fixo móvel funcionando.
Trocando seu logotipo em seu cabeçalho fixo móvel
Se você quiser usar um logotipo diferente para o seu cabeçalho fixo móvel, você pode fazer isso facilmente com um pouco de jQuery. Tudo que você precisa são os URLs para ambos os logotipos que você vai usar. O primeiro URL da imagem do logotipo deve ser o logotipo padrão que você já está usando para o seu site. O segundo URL da imagem do logotipo deve ser o logotipo que você deseja usar para o cabeçalho fixo móvel. Certifique-se de carregar os dois logotipos para a biblioteca de mídia e recuperar os URLs.
Depois de ter os dois URLs, vá para o painel do WordPress e navegue até Divi> Opções de tema> Integrações. Encontre a caixa de entrada “Adicionar código ao cabeçalho do seu blog” e digite o seguinte script jQuery:
<script>
var imageUrl = [
'ENTER DESKTOP LOGO IMAGE URL',
'ENTER MOBILE LOGO IMAGE URL',
];
jQuery(window).on('scroll', function() {
var $header = jQuery('header');
var $logo = jQuery('#logo');
if ((jQuery(window).width() < 981) &&
($header.hasClass('et-fixed-header'))) {
return $logo.attr('src', imageUrl[1]);
};
return $logo.attr('src', imageUrl[0])
});
</script>
Agora substitua o texto “INSERIR URL DA IMAGEM DO LOGOTIPO DO DESKTOP” pelo url do logotipo que você está usando no momento para o seu site.
Em seguida, substitua o texto “INSERIR URL DA IMAGEM DO LOGOTIPO MÓVEL” pelo URL do logotipo que deseja usar apenas para dispositivos móveis.
Salve as configurações e verifique os resultados.
Suporte de navegador
Neste post, criei o cabeçalho fixo usando apenas CSS, baseando-me fortemente na propriedade CSS “position: fixed”. Esta propriedade CSS pode ser inconsistente com versões anteriores de navegadores móveis, especialmente no iOS Safari e Android. Mas hoje em dia “position: fixed” é muito bem suportado em versões mais recentes de navegadores móveis (exceto para Opera Mini).
Existem outros plug-ins e soluções JavaScript mais robustos, mas achei melhor fornecer a versão CSS simples. Considere explorar essas opções se esta solução não funcionar para você.
Pensamentos finais
É importante mencionar que os cabeçalhos fixos móveis podem ser prejudiciais à usabilidade. Como eles continuam a bloquear a parte superior de seu navegador o tempo todo, se você não tomar cuidado, poderá desperdiçar bens imóveis valiosos sem um bom motivo. Lembre-se, nem todo mundo tem um phablet como esse cara.
É por isso que é importante personalizar seu cabeçalho fixo para dispositivos móveis, dando-lhe uma altura menor, um logotipo diferente e um botão de navegação maior. E adicionando algumas linhas de CSS ao seu site Divi, você pode ter um cabeçalho fixo no celular sem ter que usar um plugin de terceiros. Portanto, se fizer sentido adicionar um ao seu próximo projeto, vá em frente. Ter esse tipo de funcionalidade pode melhorar a interface do usuário do seu site.
Estou ansioso para ouvir de você nos comentários.
Saúde!