Pode ser frustrante quando seu menu de navegação do WordPress de repente se move para trás da barra de administração. Vimos isso acontecer com muitos usuários, especialmente após a instalação de um novo tema ou a ativação de certos plugins.
Este problema é mais comum do que você imagina. Muitos temas do WordPress não levam em consideração o espaço ocupado pela barra de administração mostrada aos usuários logados, o que pode mover seu menu do lugar.
Neste guia, mostraremos várias maneiras de corrigir o menu de navegação do WordPress que aparece sob a barra de administração. Se você deseja uma solução rápida e não técnica ou uma solução CSS limpa, encontrará um método que funciona para o seu site.
Por que a Barra de Administração do WordPress está Sobrepondo o Menu de Navegação?
Se o seu menu de navegação do WordPress parece estar oculto ou sobreposto à barra de administração, você pode estar lidando com um problema comum de exibição.
Vimos esse problema ocorrer quando o CSS de um tema não leva em consideração adequadamente a altura da barra de administração. O CSS, então, obscurece partes do cabeçalho do seu site, incluindo o menu de navegação.
Você pode notar que alguns itens do menu são difíceis de clicar ou que o menu inteiro está parcialmente coberto ao visualizar seu site. Isso pode ser frustrante, especialmente quando afeta a usabilidade do seu site.
Existem algumas razões comuns pelas quais isso pode acontecer:
- Conflitos de Tema: Às vezes, o CSS do seu tema não leva em consideração a barra de administração, fazendo com que o menu seja posicionado incorretamente.
- Conflitos de Plugins: Um plugin que modifica o design do front-end pode, inadvertidamente, fazer com que o menu se sobreponha à barra de administração. Isso pode incluir plugins que adicionam mega menus ou banners de cabeçalho.
- CSS Personalizado: Se você adicionou CSS personalizado ao seu site, ele pode estar interferindo na exibição correta do seu menu.
Este problema pode afetar a usabilidade do seu site, dificultando a navegação dos usuários. Felizmente, existem várias maneiras de corrigir este problema, começando com uma solução simples que não requer nenhum código.
Aqui está uma visão geral das soluções que mostraremos. Você pode pular para aquela com a qual se sente mais confortável:
- Solução 1: Ocultar a Barra de Administração através das Configurações do Perfil do Usuário
- Solução 2: Corrigir a Sobreposição com CSS Personalizado
- Solução 3: Verificar Conflitos de Plugins
- Recursos Adicionais para Administração do WordPress
Solução 1: Ocultar a Barra de Administração através das Configurações do Perfil do Usuário
Esta é a maneira mais fácil de corrigir o problema se você não se sente confortável em adicionar código. Funciona bem para iniciantes ou usuários que não têm permissão para alterar o tema ou adicionar CSS personalizado.
Em vez de corrigir o layout, este método oculta completamente a barra de administração para que ela não cubra mais o menu.
Atenção: Ocultar a barra de administração significa que você não verá mais links rápidos para editar posts, gerenciar comentários ou acessar atualizações de plugins enquanto navega pelo seu site.
Além disso, esta configuração se aplica apenas à sua conta de usuário. Se outras pessoas usarem o site, elas precisarão seguir os mesmos passos abaixo.
Para fazer isso, faça login no seu painel do WordPress e vá para Usuários » Perfil no menu à esquerda.
Role para baixo até a seção Barra de Ferramentas e desmarque a caixa que diz 'Mostrar Barra de Ferramentas ao visualizar o site'.
Clique no botão 'Atualizar Perfil' na parte inferior para salvar suas alterações.
Por que isso funciona
Ao desativar a barra de administração, você remove o elemento que está empurrando o menu para fora do lugar. É uma solução simples que evita problemas de layout mais profundos, especialmente em sites onde apenas usuários logados veem o problema.
Solução 2: Corrigir a Sobreposição com CSS Personalizado
Se você se sente confortável usando código personalizado e deseja uma solução de longo prazo, adicionar CSS é o caminho a seguir. Isso permite que você controle exatamente como o cabeçalho se comporta, sem desativar a barra de administração.
Recomendamos o uso do plugin WPCode para adicionar CSS personalizado com segurança. Ele funciona com qualquer tema e permite que você aplique sua correção apenas para usuários logados (já que os convidados não veem a barra de administração).
Passo 1: Inspecione o Elemento do Cabeçalho
Clique com o botão direito no cabeçalho ou menu de navegação do seu site e escolha 'Inspecionar' no seu navegador. Isso abrirá as ferramentas do desenvolvedor.
Passe o mouse sobre o HTML.
O navegador destacará o elemento correspondente na página.
Procure por uma classe ou ID que envolva sua navegação. Você usará isso em seu CSS personalizado.
Etapa 2: Instalar o WPCode
Instale e ative o plugin WPCode. Ele é fácil de usar para iniciantes e permite adicionar código sem editar os arquivos do tema.
Você pode usar a versão gratuita para este tutorial, mas a versão Pro oferece recursos extras para projetos maiores.
Etapa 3: Adicionar o Snippet de CSS
Vá para Snippets de Código » Adicionar Snippet e escolha 'Adicionar Seu Código Personalizado (Novo Snippet)'.
Primeiro, dê um nome descritivo ao seu snippet. Assim, você poderá se lembrar facilmente para que ele serve mais tarde. Chamaremos de 'Corrigir Barra de Administração Sobreposta'.
Em seguida, selecione 'Snippet de CSS' como o tipo de código.
Depois disso, cole este código CSS no editor:
.logged-in .main-navigation {
margin-top: 32px;
z-index: 9999;
position: relative;
}
Isso visa apenas o menu de navegação para usuários logados, corrigindo o problema sem alterar a aparência do site para os visitantes.
Se o seu tema usar uma classe ou ID diferente, substitua .main-navigation pela que você encontrou na ferramenta Inspecionar.
Etapa 4: Usar Lógica Condicional Inteligente
Role até a seção 'Lógica Condicional Inteligente' no WPCode e ative-a.
Defina a condição como 'Mostrar' se 'Logado' for 'Verdadeiro'.
Em seguida, clique em 'Salvar Snippet' e mude de Inativo para Ativo.
Agora visite seu site e veja se o menu aparece acima da barra de administração.
Se não, ajuste o margin-top ou o seu seletor.
Por que isso funciona
Alguns temas não levam em conta a altura de 32px da barra de administração. Este CSS adiciona espaçamento e traz seu cabeçalho para frente, corrigindo o layout apenas para usuários que veem a barra de administração.
Solução 3: Verificar Conflitos de Plugins
Se o menu ainda aparecer sob a barra de administração após tentar as correções anteriores, um conflito de plugin pode ser o motivo.
Alguns plugins adicionam seu próprio CSS ou JavaScript, que podem interferir acidentalmente no layout do seu tema, especialmente se modificarem a área do cabeçalho ou de navegação.
Já vimos isso acontecer em sites de clientes, e rastrear o plugin conflitante geralmente resolve o problema sem mexer em nenhum código.
Passo 1: Desativar Todos os Plugins
Vá para o seu painel e acesse Plugins » Plugins Instalados.
Selecione todos os plugins usando a caixa de seleção no topo, escolha ‘Desativar’ no menu de ações em massa e clique em ‘Aplicar’.
Agora visite seu site. Se o menu de navegação parecer normal, então um dos plugins provavelmente foi o culpado.
Passo 2: Reativar Plugins Um por Um
Volte para a tela ‘Plugins Instalados’ e reative cada plugin individualmente. Após cada um, recarregue seu site e verifique o menu.
Continue fazendo isso até que o problema retorne. O último plugin que você ativou é o que está causando o conflito.
Etapa 3: Decida o que fazer
Uma vez que você identificou o plugin problemático, você tem algumas opções. Primeiro, tente entrar em contato com o desenvolvedor do plugin para obter suporte. Eles podem já saber sobre o problema ou sugerir uma solução alternativa.
Se não houver correção disponível, você pode procurar um plugin alternativo que ofereça recursos semelhantes sem causar problemas de layout.
Recursos Adicionais para Administração do WordPress
Aqui estão alguns recursos adicionais que podem ser úteis:
- Como Desativar a Barra de Administração do WordPress para Todos os Usuários, Exceto Administradores
- Como Corrigir o Problema da Barra de Administração Ausente no WordPress (Métodos)
- Como Corrigir a Falta do Editor de Arquivos de Tema no Admin do WordPress (Correção Fácil)
- Como Adicionar Links de Atalho Personalizados à Barra de Administração do Seu WordPress
- Guia para Iniciantes sobre Solução de Problemas de Erros no WordPress (Passo a Passo)
Esperamos que as soluções que compartilhamos resolvam o problema da barra de administração que causa o problema de exibição do menu de navegação ou do cabeçalho em seu site.
Você também pode querer ver nosso guia sobre como corrigir os erros mais comuns do WordPress ou dar uma olhada em nossas dicas para personalizar a área de administração do WordPress de acordo com suas necessidades.
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.
Samuel
há um tempo, enquanto eu trabalhava para um cliente, tive esse problema e ele foi resolvido editando o CSS do tema, pois eu entendo de CSS. Este artigo trouxe outro método que normalmente não me viria à mente ao lidar com esse tipo de problema. é sempre bom estar armado com várias maneiras de resolver problemas do WordPress. Agora tenho outras opções caso me depare com isso novamente. artigo muito útil. obrigado.