Como Ocultar um Menu Móvel no WordPress (Guia para Iniciantes)

A navegação mobile pode definir ou arruinar a experiência do usuário do seu site WordPress. E na WPBeginner, descobrimos que as configurações padrão do menu mobile nem sempre se alinham com o que nossos usuários desejam alcançar em seus sites.

Embora os temas do WordPress façam um bom trabalho ao converter menus de desktop em versões amigáveis para dispositivos móveis, essa conversão automática nem sempre é a melhor solução.

Nossos usuários frequentemente precisam exibir opções de navegação diferentes para seus visitantes mobile, seja por simplicidade, promoções especiais ou taxas de conversão aprimoradas.

Neste artigo, mostraremos como ocultar facilmente o menu mobile padrão no WordPress para que você possa exibir um menu personalizado em vez disso.

Cobriremos dois métodos diferentes neste tutorial, e você pode usar os links rápidos abaixo para pular para o método que deseja usar:

• Método 1: Ocultar um Menu Mobile no WordPress Usando um Plugin
• Método 2: Ocultar Menu Mobile Usando Código CSS

Método 1: Ocultar um Menu Mobile no WordPress Usando um Plugin

A maneira mais fácil de ocultar o menu mobile fornecido pelo seu tema WordPress é usando o plugin WP Mobile Menu.

Este plugin permite que você crie um menu exclusivo e, em seguida, o exiba para usuários mobile. Você também pode ocultar o menu mobile que muitos temas fornecem por padrão.

Crie Seu Menu Mobile

Primeiro, você precisa criar o menu de navegação que deseja exibir em dispositivos móveis. Para começar, acesse a página Aparência » Menus no seu painel do WordPress.

Na próxima tela, você precisa digitar um nome para o menu. É uma boa ideia usar algo que o ajude a identificar o menu mais tarde, como 'Menu Mobile'.

Depois disso, você pode selecionar todas as postagens e páginas que deseja adicionar ao menu móvel.

Para instruções mais detalhadas, consulte nosso guia sobre como criar um menu de navegação no WordPress.

Quando estiver satisfeito com o layout do menu, lembre-se de clicar no botão ‘Salvar Menu’ para salvar suas alterações.

Configurar as Opções do Plugin

Com isso feito, é hora de instalar e ativar o plugin WP Mobile Menu. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, vá para Opções do Menu Móvel para configurar as opções do plugin.

Aqui, você deve rolar até o final da página e escolher se deseja exibir o menu móvel no lado esquerdo ou direito da tela usando os botões de alternância ‘Habilitar Menu Esquerdo/Direito’.

Em seguida, abra o menu suspenso ‘Escolha um menu’ e selecione o menu móvel que você criou anteriormente.

Depois disso, basta clicar em ‘Salvar Alterações’.

Existem muitas maneiras de estilizar seu menu de navegação do WordPress. Por exemplo, você pode selecionar ‘Opções de Fonte’ e, em seguida, alterar o tamanho da fonte, peso, espaçamento e muito mais.

Você também pode selecionar ‘Estilo do Cabeçalho’ e alterar a aparência e o comportamento do cabeçalho móvel.

Por exemplo, você pode adicionar uma sombra, alterar a altura do cabeçalho, criar um menu de navegação fixo e muito mais.

A maioria dessas configurações é direta, então você pode examiná-las e ver que tipos diferentes de efeitos você pode criar. Por exemplo, você pode adicionar um ícone de imagem ou adicionar CSS aos seus menus do WordPress.

Quando estiver satisfeito com a configuração do menu móvel, basta clicar em ‘Salvar Alterações’.

Adicione Seu Menu Móvel ao WordPress

Agora que você configurou o plugin, o próximo passo é dizer ao WordPress onde exibir o menu móvel, indo em Aparência » Menus.

Se ainda não estiver selecionado, abra o menu suspenso ‘Selecionar um menu para editar’ e escolha o menu móvel que você criou anteriormente.

Em seguida, em ‘Configurações do Menu’, você deve selecionar ‘Menu Móvel Esquerdo’ ou ‘Menu Móvel Direito’, dependendo de onde você deseja exibir o menu.

Depois disso, basta clicar em ‘Salvar Menu’.

Agora, visite seu site em um dispositivo móvel ou visualize a versão móvel do seu site WordPress pelo desktop. Você deverá ver o menu móvel personalizado.

Solução de Problemas: Como Ocultar o Menu Móvel Padrão

Por padrão, o plugin oculta automaticamente os elementos de menu usados por temas WordPress mais populares. Isso significa que o menu móvel padrão do seu tema deve ser ocultado sem que você precise fazer nada.

No entanto, se o menu móvel padrão ainda estiver aparecendo, você precisará ir para Opções de Menu Móvel » Opções Gerais » Opções de Visibilidade no painel do WordPress.

Aqui, clique no botão ‘Encontrar Elemento’.

Isso abre uma versão móvel do seu site.

Neste pop-up, clique para selecionar o conteúdo que você deseja ocultar em dispositivos móveis, como o menu fornecido pelo seu tema WordPress.

Isso adiciona a classe CSS do conteúdo ao campo ‘Ocultar Elementos’.

Com isso feito, clique em ‘Salvar Alterações’. Agora, o menu do tema não deve mais aparecer em dispositivos móveis.

Método 2: Ocultar Menu Mobile Usando Código CSS

Este método é um pouco avançado e requer que você adicione código personalizado ao seu site.

Para este método, você pode escolher entre duas abordagens diferentes. Você pode ocultar todo o menu móvel padrão usando CSS, ou pode ocultar itens individuais do menu em dispositivos móveis.

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

Uma opção é remover completamente o menu móvel padrão do seu tema WordPress. Esta é uma boa escolha se você quiser usar um método diferente de navegação em dispositivos móveis, como links de navegação de trilha de migalhas ou imagens interativas.

Primeiro, você precisa encontrar o elemento que precisa modificar. Para fazer isso, basta ir ao seu site WordPress e passar o mouse sobre o menu de navegação.

Depois disso, clique com o botão direito e selecione a ferramenta Inspecionar do seu navegador.

A tela do seu navegador agora será dividida em duas, e você verá o código da página, incluindo o código do menu de navegação.

No entanto, não queremos alterar este menu de navegação, pois ele é visível na tela do desktop.

Felizmente, existe uma maneira fácil de acessar o menu móvel em vez disso.

Simplesmente arraste o canto do navegador para torná-lo menor até que o WordPress substitua o menu de navegação do desktop pelo menu móvel.

Agora, você precisa descobrir o identificador e a classe CSS usados pelo menu de navegação móvel. Simplesmente mova o mouse sobre o código-fonte até que seu navegador destaque a área do menu. Esta seção contém a classe e o identificador que você precisa usar.

Assim que tiver essas informações, você poderá ocultar o menu em dispositivos móveis usando código.

Frequentemente, guias do WordPress pedirão que você adicione código personalizado ao seu arquivo functions.php. No entanto, isso não é muito amigável para o usuário, e até mesmo um pequeno erro no código pode causar todos os tipos de erros comuns do WordPress. O código personalizado pode até quebrar completamente o seu site.

Em vez disso, é mais seguro adicionar código personalizado usando WPCode.

Este plugin gratuito facilita a adição de CSS personalizado, PHP, HTML e muito mais ao WordPress sem colocar seu site em risco. Você pode simplesmente colar o código do plugin no editor do WPCode e, em seguida, ativar e desativar o código com um clique de botão.

Para começar, você precisará instalar e ativar o WPCode. Para mais informações, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Depois disso, vá para Code Snippets » Add Snippet no painel do WordPress.

Aqui, você verá todos os snippets pré-fabricados que pode adicionar ao seu site. Isso inclui um snippet que permite desativar completamente os comentários, carregar tipos de arquivo que o WordPress normalmente não suporta, desativar páginas de anexo, e muito mais.

Para adicionar CSS personalizado ao seu site, basta passar o mouse sobre ‘Adicionar Seu Código Personalizado’ e, em seguida, clicar no botão ‘+ Adicionar Snippet Personalizado’.

Em seguida, selecione ‘Snippet de CSS’ como o tipo de código na lista de opções que aparecem na tela.

Isso o levará à página Criar Trecho Personalizado.

Para começar, digite um título para o snippet de código. Pode ser qualquer coisa que ajude você a identificar o snippet no seu painel do WordPress.

Depois disso, você pode colar ou digitar o seguinte código no editor de código:

.navbar-toggle-wrapper {
display:none;
}

Não se esqueça de substituir .navbar-toggle-wrapper pelo identificador que você encontrou usando a ferramenta Inspecionar do seu navegador.

Quando estiver pronto para publicar o snippet de código, role até o topo da tela e clique no alternador ‘Inativo’ para que ele mude para ‘Ativo’.

Finalmente, clique em 'Salvar Snippet' para tornar o snippet ativo.

Agora, o menu móvel do seu tema ficará oculto em smartphones e tablets.

2. Ocultando 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 quer que apareçam em dispositivos móveis ou de desktop.

Dessa forma, você pode usar o mesmo menu de navegação para visitantes móveis e de desktop. Primeiro, vá para Aparência » Menus.

Com isso feito, 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’.

Depois disso, role até um item de menu que você deseja ocultar no celular e clique para expandi-lo.

Nas configurações do item de menu, você verá a opção de adicionar uma classe CSS. Aqui, simplesmente prossiga e adicione uma classe CSS .hide-mobile.

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

Da mesma forma, você pode clicar em qualquer item de menu que deseja ocultar em computadores desktop. No entanto, desta vez, adicione a classe CSS .hide-desktop em vez disso.

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

Com isso feito, você está pronto para ocultar esses itens de menu usando CSS personalizado. Simplesmente crie um novo trecho de código personalizado seguindo o mesmo processo descrito acima.

Agora, você pode adicionar o seguinte CSS ao editor de código WPCode:

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

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

}

Depois disso, basta publicar o trecho de código.

Agora, se você visitar seu blog WordPress, verá que os itens de menu que você queria ocultar no desktop não estão mais visíveis. Para testar como o menu fica no celular, basta diminuir a tela do navegador até que o WordPress mude para o menu mobile.

Esperamos que este artigo tenha ajudado você a aprender como ocultar facilmente um menu mobile no WordPress. Você também pode querer ver nossas melhores escolhas de especialistas para os melhores construtores de páginas WordPress de arrastar e soltar e nosso guia sobre como adicionar lógica condicional a menus.

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