Como ocultar menu WordPress em página específica ou por tipo de usuário

Para ocultar o menu em uma página WordPress específica, o método mais rápido é adicionar CSS no Personalizador: .page-id-XX .main-navigation { display: none !important; } (troque XX pelo ID real da página, que aparece na URL do editor).

Para ocultar itens específicos do menu por tipo de usuário (visitante vs logado, admin vs assinante) use o plugin Nav Menu Roles. Para páginas inteiras de conversão sem header/footer use Templates condicionais do Elementor Pro. Para ocultar seções do painel admin (dashboard) de editores e autores use Adminimize.

Escolha o método pelo cenário:

Antes de qualquer método, entenda a diferença crítica: menu FRONTEND é o que visitante vê no site (navegação superior). Menu ADMIN DASHBOARD é a barra lateral escura dentro do wp-admin. Barra admin topo é a faixa preta que aparece pro usuário logado no site. Cada um tem forma diferente de ocultar.

Método 1: CSS no Personalizador para ocultar menu em página específica

O método mais rápido para ocultar o menu numa página exclusiva (landing page, checkout, coming soon). Não precisa plugin, não precisa mexer no tema. Funciona em qualquer tema WordPress moderno.

Passo 1: descobrir o ID da página

• No editor da página no wp-admin, olha a URL. Aparece algo como wp-admin/post.php?post=123&action=edit
• O 123 é o ID da página
• Anota esse número

Passo 2: encontrar o seletor CSS do menu

• Abre a página do site no navegador
• Clica com botão direito sobre o menu → Inspecionar Elemento
• Localiza a tag mais alta que contém todo o menu (normalmente <nav>, <header>, ou uma <div> com classe)
• Anota a classe ou ID (ex: .main-navigation, #site-header, .primary-menu)

Passo 3: adicionar CSS no Personalizador

1. wp-admin > Aparência > Personalizar > CSS Adicional
2. Cola o código (substituindo os valores):

.page-id-123 .main-navigation {
  display: none !important;
}

3. Clica em Publicar

O !important é necessário porque o CSS do tema tem alta especificidade. Sem !important, seu CSS provavelmente será sobrescrito.

Para ocultar em múltiplas páginas:

.page-id-123 .main-navigation,
.page-id-456 .main-navigation,
.page-id-789 .main-navigation {
  display: none !important;
}

Para ocultar apenas o header inteiro (não só o menu):

.page-id-123 header,
.page-id-123 #masthead {
  display: none !important;
}

Método 2: Plugin Nav Menu Roles para ocultar itens por tipo de usuário

Quando você quer que certos itens do menu apareçam só para usuários logados (ou só admin, ou só assinante), CSS não resolve. Precisa de plugin. O melhor gratuito é Nav Menu Roles.

Como instalar e usar:

1. wp-admin > Plugins > Adicionar Novo > busca “Nav Menu Roles”
2. Instala e ativa
3. Vai em Aparência > Menus
4. Ao expandir cada item do menu, aparece nova seção Display Mode
5. Escolhe uma opção:
   • Everyone: todo mundo vê (padrão)
   • Logged In Users: só usuário logado
   • Logged Out Users: só visitante não logado
   • Roles: escolhe roles específicos (Administrator, Editor, Author, Subscriber, etc.)

Casos comuns de uso:

• Item “Minha Conta”: só usuários logados
• Item “Login”: só usuários NÃO logados
• Item “Área Restrita”: só assinantes ou admin
• Item “Sair”: só usuários logados

O plugin funciona em qualquer tema e é compatível com Elementor, WooCommerce, Restrict Content Pro, MemberPress.

Método 3: Elementor Pro Template Conditions para páginas sem header

Quando você quer criar landing page ou checkout SEM header e footer padrão do tema, Elementor Pro oferece a solução mais elegante: crie um Template alternativo (canvas ou header vazio) e aplique só nas páginas escolhidas.

Passo a passo (Elementor Pro):

1. wp-admin > Templates > Theme Builder
2. Clica em Adicionar Novo > escolhe Single Page
3. Cria layout sem header/footer (usa tipo “Elementor Canvas” ou “Elementor Full Width”)
4. Salva
5. Em Display Conditions, escolhe “Include > Singular > Pages > Selecionar páginas específicas”
6. Publica

O template vai substituir o padrão do tema apenas nas páginas selecionadas. Vantagem: você mantém o header/footer normal no resto do site e cria uma experiência de conversão focada nas landings.

Para quem usa Elementor Free, o caminho é diferente: nas configurações da página, muda Template para Elementor Canvas (sem header) ou Elementor Full Width (sem sidebar). Simples mas menos flexível.

Configurações do menu principal também podem ser personalizadas com colocar ícone no menu WordPress que ajuda visualmente quando você mantém apenas os itens essenciais.

Método 4: Adminimize para ocultar seções do painel admin

Se o objetivo é ocultar itens do menu ADMIN DASHBOARD (não do site público) de usuários com role específico (editores, autores, contribuidores), o plugin de referência é Adminimize.

Como usar:

1. Instala e ativa Adminimize
2. wp-admin > Configurações > Adminimize
3. Navega pelas abas de configuração:
   • Admin Bar Backend/Frontend Options: ocultar itens da barra topo
   • Menu Backend Options: ocultar itens do menu lateral do dashboard
   • Global Options: ocultar botões, metaboxes
4. Para cada item, marca as roles que NÃO devem ver
5. Salva

Uso comum: ocultar itens como “Plugins”, “Ferramentas”, “Aparência” para Editores e Autores. Só admin verdadeiro deve ter acesso a esses controles.

Alternativa mais leve: adicionar código no functions.php do tema filho:

function remover_menu_admin() {
  if (!current_user_can('administrator')) {
    remove_menu_page('tools.php');       // Ferramentas
    remove_menu_page('plugins.php');     // Plugins
    remove_menu_page('themes.php');      // Aparência
  }
}
add_action('admin_menu', 'remover_menu_admin', 999);

O código acima remove os itens para todos que NÃO são administradores. Ajuste os remove_menu_page conforme necessidade.

Ocultar menu no mobile mantendo no desktop (e vice-versa)

Media queries CSS resolvem sem plugin. Adiciona no Personalizador > CSS Adicional:

Ocultar menu no mobile (< 768px):

@media (max-width: 768px) {
  .main-navigation {
    display: none !important;
  }
}

Ocultar menu no desktop (> 768px), mostrar só mobile:

@media (min-width: 769px) {
  .main-navigation {
    display: none !important;
  }
}

Ocultar apenas item específico do menu no mobile:

@media (max-width: 768px) {
  .menu-item-45 {
    display: none !important;
  }
}

O menu-item-45 é o ID do item específico do menu (você encontra inspecionando o elemento). Ajusta pelo número real do seu menu.

Impacto de ocultar menu no SEO

Ocultar menu com display: none não é penalizado pelo Google, desde que seja para melhorar experiência do usuário (landing page de conversão, checkout, coming soon). Google usa display: none para site responsivo o tempo todo.

O que é penalizado pelo Google:

• Texto oculto para enganar: esconder centenas de palavras-chave com CSS
• Link farming oculto: ocultar links de baixa qualidade
• Cloaking: mostrar conteúdo diferente para Googlebot vs usuário

Ocultar menu inteiro em página de conversão está longe dessas práticas. É otimização de UX legítima. Google Analytics 4 e Search Console vão continuar rastreando a página normalmente.

Para conferir se sua página está sendo indexada corretamente mesmo com menu oculto, use o Teste de URL no Search Console.

5 erros comuns ao ocultar menu WordPress

Erro 1: esquecer o !important Sem !important, o CSS do tema sobrescreve o seu e o menu continua aparecendo. Sempre inclua !important em CSS de personalização.

Erro 2: usar seletor errado Copiar .main-navigation do tutorial genérico enquanto seu tema usa .primary-menu ou #site-nav. Sempre inspecione o elemento REAL do seu site antes de aplicar CSS.

Erro 3: ocultar menu quando deveria ocultar item específico Se você só quer esconder o item “Loja” para visitantes não logados, não oculte o menu inteiro. Use plugin Nav Menu Roles no item específico.

Erro 4: mexer no functions.php do tema em vez do tema filho Toda edição no functions.php do tema principal se perde quando o tema atualiza. Sempre use tema filho para código customizado.

Erro 5: cache não atualizando Depois de aplicar CSS, o cache do site (WP Rocket, LiteSpeed Cache, Cloudflare) pode segurar a versão antiga. Limpa o cache do plugin de cache + cache do navegador antes de considerar problema.

Se o menu está com problema mais grave (não aparece nem quando deveria), veja menu não aparece no WordPress: soluções e dicas que cobre troubleshooting completo.

Perguntas frequentes

Como ocultar o menu do WordPress em uma página específica?

Adiciona no Personalizador > CSS Adicional o código .page-id-123 .main-navigation { display: none !important; } (troque 123 pelo ID real da página que aparece na URL do editor). O !important é obrigatório para sobrescrever o CSS do tema.

Como ocultar um item específico do menu para visitantes não logados?

Instala o plugin gratuito Nav Menu Roles. Depois vai em Aparência > Menus, expande o item que quer ocultar e escolhe Display Mode = “Logged In Users” (só logados vejam) ou “Logged Out Users” (só visitantes vejam).

Ocultar menu com CSS prejudica SEO?

Não. Google não penaliza display: none usado para melhorar experiência (landing page, checkout, coming soon). Só é penalizado ocultar texto para enganar (spam de palavras-chave, link farming). Menu oculto em página de conversão é otimização legítima de UX.

Como criar landing page sem header e footer no WordPress?

3 caminhos: 1) Elementor Free = muda template da página para “Elementor Canvas”; 2) Elementor Pro = cria Template com Display Conditions só nas páginas de landing; 3) Tema Astra/GeneratePress = tem opção nativa “Disable header/footer” nas configurações da página.

Como ocultar seções do painel admin para editores?

Instala o plugin Adminimize e configura na aba “Menu Backend Options” quais itens devem ser ocultados para cada role (Editor, Author, Contributor). Alternativa via código: adiciona remove_menu_page() no functions.php do tema filho com verificação current_user_can('administrator').

Como ocultar menu só no mobile no WordPress?

Adiciona no Personalizador > CSS Adicional um media query: @media (max-width: 768px) { .main-navigation { display: none !important; } }. O 768px é o breakpoint mobile padrão, ajuste conforme seu tema.

Como descobrir o ID de uma página no WordPress?

Abre o editor da página no wp-admin e olha a URL. Aparece wp-admin/post.php?post=123&action=edit. O 123 é o ID da página. Alternativa: instala plugin Reveal IDs que mostra o ID em todas listagens do admin.

Onde encontro a classe CSS do meu menu?

Abre a página do site no navegador, clica com botão direito sobre o menu e escolhe “Inspecionar Elemento”. A tag <nav> ou <header> que contém o menu tem uma classe (ex: .main-navigation) ou ID (ex: #site-header). Use esse seletor no seu CSS.