Escolha uma Página

Você deseja ocultar um menu móvel no WordPress?

A maioria dos temas WordPress vem com estilos integrados que transformam automaticamente seus menus de navegação em um menu móvel. No entanto, você pode não querer usar o mesmo menu no celular ou pode querer usar um estilo de menu diferente.

Neste artigo, mostraremos como ocultar facilmente um menu móvel no WordPress usando um plugin ou método de código.

Escondendo um menu WordPress no celular

Método 1. Ocultar um menu móvel no WordPress usando um plug-in

Este método é mais fácil e recomendado para iniciantes. Usaremos um plug-in para ocultar o menu móvel existente fornecido pelo seu tema WordPress e, em seguida, usaremos um menu diferente ou nenhum menu em dispositivos móveis.

Primeiro, você precisa visitar o Aparência »Menus página e crie um novo menu de navegação que você gostaria de exibir em dispositivos móveis.

Crie um novo menu para ser usado em dispositivos móveis

Na próxima tela, você precisa fornecer um nome para o seu novo menu que ajuda a identificá-lo posteriormente. Vamos chamá-lo de “Menu Móvel”. Depois disso, você pode selecionar os itens que deseja adicionar ao seu menu na coluna da esquerda.

Adicionando itens de menu

Quando terminar de adicionar itens ao menu, não se esqueça de clicar no botão Salvar menu para salvá-lo.

Se você precisar de ajuda para criar um novo menu de navegação, siga nosso guia para iniciantes para criar um menu de navegação no WordPress.

Em seguida, você precisa instalar e ativar o Menu WP Mobile plugar. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você precisa visitar Opções do menu móvel página para definir as configurações do plugin. A partir daqui, você precisa selecionar se deseja exibir o menu do seu celular à direita ou à esquerda, ativando o botão de alternância.

Escolha o menu do celular e sua direção

No menu suspenso, selecione o menu móvel criado anteriormente.

Em seguida, você precisa rolar para baixo até a seção ‘Ocultar menu do tema original’. É aqui que você pode dizer ao plug-in para ocultar um menu móvel criado pelo seu tema WordPress.

Ocultar menu do tema móvel no WordPress

Por padrão, o plug-in usará identificadores de elemento comumente usados ​​pelos temas mais populares do WordPress. A maioria dos usuários não precisa fazer nada aqui.

No entanto, se o plug-in não consegue ocultar o menu do seu tema, você pode voltar aqui e clicar no botão ‘Encontrar elemento’ para simplesmente apontar para o menu de navegação do seu tema.

Não se esqueça de clicar no botão Salvar alterações para armazenar suas configurações.

Agora que configuramos o plug-in, precisamos dizer ao site do WordPress para exibir nosso menu móvel no novo local de menu adicionado pelo plug-in.

Simplesmente, vá para o Aparência »Menus página. Certifique-se de que o menu móvel criado anteriormente esteja selecionado no menu suspenso. Abaixo do seu item de menu, escolha o local selecionado nas configurações do plug-in (por exemplo, Menu móvel esquerdo ou Menu móvel direito).

Localização do menu

Agora você pode visitar seu site para ver o novo menu em ação. O plug-in agora ocultará o menu móvel do seu tema e exibirá um menu personalizado.

Menu móvel substituído

O plugin WP Mobile Menu permite que você altere a cor da barra de menu, altere a opacidade, adicione ícones e muito mais nas configurações. Sinta-se à vontade para brincar com essas configurações.

Método 2. Ocultar Menu Móvel usando Código CSS

Este método é um pouco avançado e requer o uso de algum CSS personalizado.

Para este método, você pode escolher usar duas abordagens diferentes. Você pode simplesmente ocultar um menu móvel completo usando CSS ou pode ocultar itens de menu individuais em dispositivos móveis.

1. Escondendo um menu completo em dispositivos móveis usando CSS

Primeiro, você precisa descobrir o elemento que precisa modificar usando CSS personalizado. Para isso, basta acessar seu site e passar o mouse sobre o menu de navegação. Depois disso, clique com o botão direito e selecione a ferramenta Inspecionar.

Inspecionar ferramenta

A tela do seu navegador será dividida em duas e você verá o código-fonte da sua página da web. Agora, este menu de navegação não é o que você precisa direcionar porque está visível na tela da área de trabalho.

Código-fonte ao visualizar o menu da área de trabalho

Você precisa reorganizar a tela do navegador arrastando-a do canto para um tamanho menor até que o menu de navegação da área de trabalho seja substituído pelo menu móvel.

Identificador de menu móvel

Você precisa descobrir o identificador e a classe CSS usados ​​pelo seu menu de navegação do WordPress. Você pode fazer isso movendo o mouse sobre o código-fonte até que a área do menu seja destacada.

Como você pode ver na imagem acima, nosso tema de teste está usando o navbar-toggle-wrapper aula.

Depois disso, você precisa ir para Aparência »Personalizar página na área de administração do WordPress para iniciar o personalizador de tema. Aqui, você precisa alternar para a guia ‘CSS adicional’ e clicar no ícone do celular no canto inferior direito do painel esquerdo.

Adicionando CSS personalizado para ocultar o menu completo

O personalizador agora mostrará uma prévia de como seu site ficará em dispositivos móveis. Agora você pode inserir o seguinte código CSS e ver o menu do seu celular desaparecer no painel de visualização.

.navbar-toggle-wrapper  
display:none; 
 

Não se esqueça de substituir o .navbar-toggle-wrapper pelo identificador usado pelo seu tema WordPress.

Depois disso, clique no botão ‘Publicar’ na parte superior para salvar suas alterações.

2. Ocultar itens de menu específicos no menu móvel usando CSS

Este método permite que você crie um menu de navegação e, em seguida, mostre ou oculte seletivamente itens que você não deseja exibir em dispositivos móveis ou desktop.

A vantagem desse método é que você pode usar o mesmo menu de navegação para celular e desktop e simplesmente ocultar os itens que você não deseja que sejam vistos.

Primeiro, você precisa ir para Aparência »Menus página e clique no botão Opções de tela no canto superior direito da tela. A partir daqui, você precisa marcar a caixa ao lado da opção ‘Classes CSS’.

Opções de tela

Depois disso. você precisa rolar para baixo até um item de menu que deseja ocultar em dispositivos móveis e clicar para expandi-lo. Nas configurações do item de menu, você verá agora a opção de adicionar uma classe CSS. Vá em frente e adicione .hide-mobile Classe CSS lá.

Adicionar classe CSS

Repita o processo para todos os itens de menu que você não deseja mostrar no celular.

Da mesma forma, você também pode clicar nos itens de menu que deseja ocultar nos computadores desktop. Desta vez, adicione o .hide-desktop Classe CSS em vez disso.

Quando terminar, não se esqueça de clicar no botão Salvar menu para armazenar suas alterações.

Agora vamos adicionar CSS personalizado para ocultar esses itens de menu. Basta ir para o Aparência »Personalizar para abrir o Theme Customizer e clicar na guia Additional CSS.

Você precisa adicionar o seguinte código CSS na caixa CSS.

@media (min-width: 980px)

    .hide-desktop
    display: none !important;
    



    @media (max-width: 980px)
    .hide-mobile
    display: none !important;
    


Adicione seu CSS personalizado

Não se esqueça de clicar no botão Publicar para salvar suas alterações.

Agora você pode visitar o seu site e perceber que os itens que deseja ocultar na área de trabalho não estão mais visíveis no menu. Ajuste a tela do navegador para um tamanho menor e você notará o mesmo no menu do celular.

Menus diferentes em telas de desktop e móveis

Esperamos que este artigo tenha ajudado você a aprender como ocultar facilmente um menu móvel no WordPress. Você também pode querer ver nosso artigo sobre como criar páginas personalizadas no WordPress ou como criar um tema personalizado do zero sem escrever código.

Se você gostou deste artigo, por favor, assine nosso Canal do Youtube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e o Facebook.

O post How to Hide a Mobile Menu in WordPress (Beginner’s Guide) apareceu primeiro no WPBeginner.

Fonte