Você ativa o menu fixo WordPress no tema, rola a página e o cabeçalho gruda no topo como esperado. Só que o primeiro título da página some atrás dele, o link de âncora leva para o lugar errado e, no celular, o menu aberto cobre metade da tela sem botão de fechar visível. O efeito existe, mas quebrou três coisas que ninguém tinha testado.
O problema quase nunca é o CSS em si. É escolher o lugar errado para implementar e replicar a receita em vários sites sem validar o comportamento em cada tema. Este artigo resolve a ordem de decisão e o teste que precisa vir antes da rede.
Os três caminhos para implementar menu fixo WordPress
Antes de escrever qualquer linha de CSS, descubra se o tema já entrega o recurso. Muitos temas premium e temas de bloco já têm opção de cabeçalho fixo, às vezes com variações: fixo sempre, fixo só depois de rolar, fixo só no desktop. Usar o recurso nativo é sempre a primeira escolha, porque ele foi testado com o resto do layout do tema.
Se o tema não tem, o segundo caminho é o construtor. Elementor tem a opção de cabeçalho fixo no widget de cabeçalho, e temas de bloco permitem criar um template de cabeçalho com posicionamento sticky via editor de site. Esse caminho também sobrevive a atualizações, porque a configuração fica no banco de dados, não em arquivo de tema.
O terceiro caminho é CSS próprio. Ele é legítimo, mas só dentro do tema filho. É aqui que a maioria erra.
| Caminho | Onde fica salvo | Sobrevive à atualização do tema | Quando usar |
|---|---|---|---|
| Recurso nativo do tema | Opções do tema (banco) | Sim | Sempre que existir |
| Construtor (Elementor, blocos) | Banco de dados | Sim | Tema sem opção nativa |
| CSS no tema filho | Arquivo do filho | Sim | Controle fino de comportamento |
| CSS no personalizador | Opção do tema (banco) | Não, some na troca de tema | Teste temporário apenas |
O CSS colado no personalizador parece prático, mas ele fica preso à opção do tema ativo. Na próxima troca de tema, ou quando o tema for reinstalado, o bloco inteiro desaparece sem aviso. Pior: se o tema for atualizado e mudar a estrutura do cabeçalho, o seletor que você usou deixa de casar e o menu fixo some no meio da produção, sem erro visível no console.
Por que a atualização do tema quebra o menu fixo
Atualização de tema raramente apaga CSS do personalizador. O que ela faz é mudar a estrutura HTML e as classes. Um seletor como .site-header pode continuar existindo, mas ganhar um div extra em volta, e aí o position: sticky para de funcionar porque o elemento pai agora tem overflow: hidden.
O mesmo vale para z-index. Se o tema novo cria uma camada de sobreposição com z-index maior, o menu fixo fica atrás dela. Você vê o cabeçalho grudar, mas ele some quando abre o menu mobile ou quando um pop-up de cookies aparece.
Por isso o tema filho é obrigatório para CSS próprio. Ele não impede a quebra estrutural, mas mantém o seu código separado, versionado e fácil de ajustar quando o tema mudar. Se você administra vários sites, esse detalhe define se a manutenção é de dez minutos ou de uma tarde inteira.
O efeito colateral que quase ninguém testa: âncora e topo do conteúdo
Quando o cabeçalho fica fixo, ele deixa de ocupar espaço no fluxo da página. O conteúdo sobe e o topo fica escondido atrás da barra. Em páginas com âncora (aquele link que leva para uma seção específica), o destino também para atrás do cabeçalho, e o leitor chega no meio do parágrafo errado.
A correção costuma ser uma das duas: adicionar scroll-margin-top nos elementos que recebem âncora, com valor igual ou pouco maior que a altura do cabeçalho, ou usar padding-top no corpo da página. A primeira é mais limpa porque não desloca o layout inteiro.
No mobile o comportamento muda de novo. Muitos temas trocam o cabeçalho por uma barra mais baixa com botão hambúrguer. Se o CSS foi escrito pensando só no desktop, o menu aberto pode ficar atrás do conteúdo, sem botão de fechar acessível, ou ocupar a tela inteira sem rolagem. Testar com o menu aberto, não só com a página rolada, é obrigatório.
Como diagnosticar antes de mexer
- Abra o site em uma janela anônima e role até o fim. Observe se o cabeçalho gruda e se algo fica escondido atrás dele.
- Inspecione o elemento do cabeçalho e veja qual classe o tema usa hoje. Anote, porque é essa classe que o seu CSS precisa mirar.
- Procure no painel do tema por opções de cabeçalho, sticky ou fixed. Se existir, pare aqui e use.
- Se for usar construtor, confirme se o cabeçalho atual já é um template do construtor ou se vem do tema. Isso muda onde a opção fica.
- Verifique se existe tema filho ativo. Se não existe, crie antes de colar qualquer CSS.
- Teste uma âncora real do site, não uma inventada. Use um link interno que já aponte para uma seção.
Passo a passo: CSS no tema filho, com teste
Com o tema filho ativo, adicione no style.css do filho ou em um arquivo carregado por ele:
.site-header {
position: sticky;
top: 0;
z-index: 999;
}
:target {
scroll-margin-top: 90px;
}
@media (max-width: 782px) {
.site-header {
position: static;
}
}O bloco do mobile desliga o sticky em telas pequenas. Isso evita o menu aberto cobrindo o conteúdo e é o ajuste que a maioria dos tutoriais esquece. Se o seu tema já tem um cabeçalho mobile separado, mire a classe dele em vez de desligar tudo.
Depois de salvar, limpe o cache do site e o cache do navegador. CSS antigo em cache é a causa mais comum de “não funcionou” quando na verdade funcionou.
Teste rápido de rolagem, âncora e menu aberto
- Role a página no desktop e confirme que o cabeçalho gruda sem pular.
- Clique em uma âncora real e veja se o título da seção aparece abaixo do cabeçalho, não atrás dele.
- Abra o menu mobile, com a página rolada, e confirme que o botão de fechar está visível e clicável.
- Role com o menu mobile aberto. Se o fundo rolar junto, o menu não está travando o scroll e vai parecer quebrado.
- Teste em uma página com formulário ou pop-up. O
z-indexdo cabeçalho não pode competir com eles.
Esse teste leva menos de cinco minutos e evita o retrabalho de descobrir o problema depois de aplicar a mesma receita em dez sites. Se o seu caso envolve um tema que troca de layout no mobile, vale entender quando o site precisa de uma versão própria para celular, porque aí o menu fixo deixa de ser só CSS e vira decisão de arquitetura: tema mobile WordPress: quando o site precisa de versão própria.
Quando NÃO usar menu fixo
Menu fixo não é sempre melhor. Em páginas longas de leitura, ele rouba altura útil e cansa. Em sites com muitos itens de menu, a barra fixa no mobile ocupa espaço demais e empurra o conteúdo para uma faixa estreita. Em páginas de conversão com formulário longo, o cabeçalho fixo compete com o botão de envio pela atenção.
Também não vale forçar quando o tema não foi feito para isso. Se o cabeçalho tem altura variável, com banner ou aviso que aparece e some, o sticky vai pular conforme a altura muda. Nesse caso, ou você fixa só uma barra secundária, ou aceita que o recurso não combina com o layout.
Erros comuns ao replicar em vários sites
- Colar o mesmo CSS em temas diferentes. A classe do cabeçalho muda de tema para tema, e o seletor genérico atinge o elemento errado.
- Esquecer o
scroll-margin-tope só perceber quando um leitor reclama que a âncora “não funciona”. - Deixar o CSS no personalizador e perder tudo na próxima troca de tema.
- Não testar o menu mobile aberto, só a página rolada.
- Usar
z-indexaltíssimo e criar conflito com pop-ups, avisos de cookies e modais. - Aplicar em todos os sites de uma vez, sem validar em um primeiro.
Se você administra vários sites, o padrão é aplicar em um, testar os cinco pontos acima e só então replicar. Um erro de z-index replicado em dez sites vira dez chamados de suporte no mesmo dia.
Prevenção: transforme o ajuste em receita documentada
Depois de validar, documente a solução: qual tema, qual classe, qual valor de scroll-margin-top, qual breakpoint desliga o sticky. Isso permite que outra pessoa do time aplique sem redescobrir tudo. Se o tema for atualizado e o menu quebrar, o documento diz exatamente onde olhar.
Vale também revisar o ajuste depois de atualizações grandes do tema ou do construtor, porque são elas que mudam a estrutura por baixo. Um checklist de pós-atualização que inclui rolagem, âncora e menu mobile aberto pega o problema antes do cliente. Se a sua operação já lida com vários sites, um painel como o 100% WP ajuda a centralizar atualizações e backups, mas o teste visual continua sendo manual, porque nenhuma ferramenta sabe se o seu cabeçalho está cobrindo o título.
Para quem trabalha com temas mais elaborados, o mesmo cuidado de testar antes de replicar vale na escolha do tema. Um tema corporativo premium costuma trazer opção nativa de cabeçalho fixo, o que elimina o CSS próprio e reduz o risco. Se o seu caso é um site com muitas imagens e layout pesado, o menu fixo também interage com o desempenho, e vale revisar como você está tratando as imagens: otimizar imagens WordPress em vários sites.
Quando chamar alguém
Se o tema é customizado, se o cabeçalho é montado por um construtor que você não domina ou se o menu fixo precisa funcionar de forma diferente em cada tipo de página, o ajuste deixa de ser CSS e vira desenvolvimento. Nesse ponto, o serviço de ajustes de layout resolve sem você precisar mexer em arquivo de tema.
Na prática, menu fixo WordPress é uma decisão de três camadas: onde implementar, o que testar e quando replicar. Acertar a primeira evita a maior parte dos problemas. Testar antes de replicar evita que o erro se multiplique.
