Como fazer a sobreposição de navegação padrão e vertical em seu site Divi

Neste post, vamos mostrar como combinar a navegação padrão e vertical. Mais especificamente; como fazer com que o menu secundário e o rodapé se sobreponham à navegação vertical em seu site. Isso significa que você não terá que escolher entre ter uma navegação superior ou uma navegação vertical; você pode fazer ambos! Você pode estilizar o menu principal e o menu secundário da maneira que quiser em seu Personalizador de temas, não é isso que vamos ajudá-lo a alcançar explicitamente neste artigo. Em vez disso, vamos mostrar as seguintes coisas que ajudam no processo de fazer o seguinte:

• como fazer seu menu secundário sobrepor sua navegação vertical
• como consertar o menu secundário ao rolar
• como fazer o rodapé se sobrepor à navegação vertical

Estas são todas as coisas que o ajudarão a criar um bom equilíbrio entre a navegação padrão e vertical em seu site. Ao fazer a sobreposição da navegação padrão e vertical, seu site não parecerá dominado pela navegação vertical. O conteúdo principal do seu site se ajustará à navegação vertical, mas o menu secundário e o rodapé se comportarão da mesma forma quando a navegação vertical não estiver habilitada.

Resultado

Ao final deste tutorial, você poderá obter o seguinte resultado em um site que usou a navegação vertical:

A inspiração para a sobreposição de navegação padrão e vertical

Em um post anterior, compartilhamos alguns exemplos de sites que usam a navegação vertical. Todos os exemplos nos mostraram como você pode ser criativo com uma opção Divi que não é usada com frequência. Uma navegação vertical bem pensada em seu site pode proporcionar aquela interação extra que você estava tentando alcançar com seus visitantes.

Ao mostrar os exemplos, houve alguns comentários que nos inspiraram a mostrar a você como alcançar determinados resultados. Este post é um daqueles tutoriais inspirados que mostram como fazer alguns ajustes no seu site sem ter que procurar por soluções você mesmo.

Fomos inspirados pelo site da Alex Brands, que usa o menu secundário na parte superior e a navegação vertical no lado esquerdo da página.

Enquanto rola, o menu secundário rola junto. Dá aquele toque especial ao site e ajuda a manter o foco no conteúdo do menu secundário. Alex Brands é um site de comércio eletrônico e o menu secundário fixo ajuda a lembrar às pessoas o que está em sua cesta de compras e a oferta que estão oferecendo.

Esse tipo de navegação vertical é especialmente interessante para sites de comércio eletrônico. A navegação vertical torna mais fácil para os visitantes navegar pelas diferentes categorias de itens que são oferecidos no site. É mais fácil seguir os itens de menu quando eles estão localizados em uma navegação vertical, pois é mais fácil interpretá-los como uma lista que as pessoas devem percorrer.

Como fazer a sobreposição de navegação padrão e vertical em seu site Divi

Inscreva-se no nosso canal no Youtube

Passos Gerais

Antes de mergulharmos na parte em que mostramos como fazer com que sua navegação padrão se sobreponha à navegação vertical, passaremos pelas etapas gerais primeiro. Essas etapas gerais são a base que você precisa percorrer antes de aplicar a sobreposição.

Sem mais nenhum devido; vamos começar.

Crie seu menu e adicione itens de menu

A primeira coisa que você precisa fazer (se ainda não tiver feito isso) é adicionar um menu e os itens de menu ao seu site. Estes são os itens de menu que aparecerão em sua navegação vertical. Para adicionar um novo menu ao seu site, vá para o Painel do WordPress> Aparência> Menus. Quando estiver nessa página, dê um título ao seu novo menu e crie o menu.

Continue adicionando itens de menu e tornando este seu menu principal.

Adicionar ícones sociais ao menu secundário

A próxima coisa que você precisa fazer é ativar o menu secundário. Para garantir que o menu secundário apareça em seu site, seu menu secundário deve ter um elemento que está ativado. Nesta postagem, vamos adicionar apenas os ícones de mídia social, mas você pode, é claro, adicionar o que quiser.

Para ativar o menu secundário e fazer com que os ícones sociais apareçam, comece indo para o Painel do WordPress> Personalizar> Cabeçalho e navegação> Elementos do cabeçalho> Habilite a opção 'Mostrar ícones sociais'.

Ativar navegação vertical

A próxima etapa que você precisa realizar é habilitar a navegação vertical dentro do seu Divi builder. Para fazer isso, vá para o Painel do WordPress> Aparência> Personalizar> Cabeçalho e navegação> Formato do cabeçalho> Habilite a navegação vertical.

Além disso, você também pode escolher onde deseja que sua navegação vertical apareça; no lado esquerdo ou direito do seu site.

Desative a navegação fixa para o seu menu principal

Antes de passarmos para as modificações avançadas, resta uma última coisa a fazer: desativar a navegação fixa para o seu menu principal. Se você já desativou o menu principal, pule esta etapa. Se, no entanto, seu menu principal estiver fixo no momento, vá para o Painel do WordPress> Divi> Opções de tema> e desative a navegação fixa.

Combine a navegação padrão e vertical

Na próxima parte deste post, mostraremos como tornar sua navegação padrão e vertical algo diferente do normal. Quando se trata de navegação vertical, estamos acostumados a ver uma parte da tela sendo coberta por ela. O menu secundário e o rodapé, por padrão, não passam na navegação vertical.

Mas, em alguns casos, queremos ter certeza de que a navegação secundária e o rodapé estão acima da navegação vertical. Dessa forma, a única coisa que dependerá da navegação vertical é o conteúdo principal. Seu site não parecerá estar completamente dividido em dois lugares; a navegação vertical e o resto do site.

Adicionar código CSS às opções do tema

Você pode adicionar o código CSS de duas maneiras: por meio das Opções de tema do Divi ou por meio do Customizador de tema. Para adicionar o código às Opções de tema, vá para o Painel do WordPress> Divi> Opções de tema> Geral> Role a guia para baixo e cole as seguintes linhas de código CSS na caixa CSS personalizada:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Adicionar código CSS ao personalizador de tema

A outra possibilidade que você tem é adicionar as linhas de código CSS ao Customizador de Tema. Para fazer isso, vá para o Painel do WordPress> Aparência> Personalizar> CSS adicional> e cole as linhas CSS no campo CSS personalizado:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Pensamentos finais

Nesta postagem, mostramos como combinar a navegação padrão e vertical em seu site. Mais precisamente; mostramos como fazer com que o menu secundário e o rodapé se sobreponham à navegação vertical e como fazer com que o menu secundário seja fixo. Se você tiver dúvidas ou sugestões; sinta-se à vontade para 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!

Imagem em destaque por Line design / shutterstock.com