{"id":972,"date":"2026-09-30T11:02:23","date_gmt":"2026-09-30T11:02:23","guid":{"rendered":"https:\/\/100porcentowp.com.br\/central-de-ajuda\/cms\/menu-fixo-wordpress-varios-temas-sites\/"},"modified":"2026-09-30T11:02:23","modified_gmt":"2026-09-30T11:02:23","slug":"menu-fixo-wordpress-varios-temas-sites","status":"publish","type":"post","link":"https:\/\/100porcentowp.com.br\/central-de-ajuda\/temas\/menu-fixo-wordpress-varios-temas-sites\/","title":{"rendered":"Menu fixo WordPress: acertar em v\u00e1rios temas e sites"},"content":{"rendered":"

Voc\u00ea ativa o menu fixo WordPress no tema, rola a p\u00e1gina e o cabe\u00e7alho gruda no topo como esperado. S\u00f3 que o primeiro t\u00edtulo da p\u00e1gina some atr\u00e1s dele, o link de \u00e2ncora leva para o lugar errado e, no celular, o menu aberto cobre metade da tela sem bot\u00e3o de fechar vis\u00edvel. O efeito existe, mas quebrou tr\u00eas coisas que ningu\u00e9m tinha testado.<\/p>\n

O problema quase nunca \u00e9 o CSS em si. \u00c9 escolher o lugar errado para implementar e replicar a receita em v\u00e1rios sites sem validar o comportamento em cada tema. Este artigo resolve a ordem de decis\u00e3o e o teste que precisa vir antes da rede.<\/p>\n

Os tr\u00eas caminhos para implementar menu fixo WordPress<\/h2>\n

Antes de escrever qualquer linha de CSS, descubra se o tema j\u00e1 entrega o recurso. Muitos temas premium e temas de bloco j\u00e1 t\u00eam op\u00e7\u00e3o de cabe\u00e7alho fixo, \u00e0s vezes com varia\u00e7\u00f5es: fixo sempre, fixo s\u00f3 depois de rolar, fixo s\u00f3 no desktop. Usar o recurso nativo \u00e9 sempre a primeira escolha, porque ele foi testado com o resto do layout do tema.<\/p>\n

Se o tema n\u00e3o tem, o segundo caminho \u00e9 o construtor. Elementor tem a op\u00e7\u00e3o de cabe\u00e7alho fixo no widget de cabe\u00e7alho, e temas de bloco permitem criar um template de cabe\u00e7alho com posicionamento sticky via editor de site. Esse caminho tamb\u00e9m sobrevive a atualiza\u00e7\u00f5es, porque a configura\u00e7\u00e3o fica no banco de dados, n\u00e3o em arquivo de tema.<\/p>\n

O terceiro caminho \u00e9 CSS pr\u00f3prio. Ele \u00e9 leg\u00edtimo, mas s\u00f3 dentro do tema filho. \u00c9 aqui que a maioria erra.<\/p>\n\n\n\n\n\n\n
Caminho<\/th>\nOnde fica salvo<\/th>\nSobrevive \u00e0 atualiza\u00e7\u00e3o do tema<\/th>\nQuando usar<\/th>\n<\/tr>\n
Recurso nativo do tema<\/td>\nOp\u00e7\u00f5es do tema (banco)<\/td>\nSim<\/td>\nSempre que existir<\/td>\n<\/tr>\n
Construtor (Elementor, blocos)<\/td>\nBanco de dados<\/td>\nSim<\/td>\nTema sem op\u00e7\u00e3o nativa<\/td>\n<\/tr>\n
CSS no tema filho<\/td>\nArquivo do filho<\/td>\nSim<\/td>\nControle fino de comportamento<\/td>\n<\/tr>\n
CSS no personalizador<\/td>\nOp\u00e7\u00e3o do tema (banco)<\/td>\nN\u00e3o, some na troca de tema<\/td>\nTeste tempor\u00e1rio apenas<\/td>\n<\/tr>\n<\/table>\n

O CSS colado no personalizador parece pr\u00e1tico, mas ele fica preso \u00e0 op\u00e7\u00e3o do tema ativo. Na pr\u00f3xima 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\u00e7alho, o seletor que voc\u00ea usou deixa de casar e o menu fixo some no meio da produ\u00e7\u00e3o, sem erro vis\u00edvel no console.<\/p>\n

Por que a atualiza\u00e7\u00e3o do tema quebra o menu fixo<\/h2>\n

Atualiza\u00e7\u00e3o de tema raramente apaga CSS do personalizador. O que ela faz \u00e9 mudar a estrutura HTML e as classes. Um seletor como .site-header<\/code> pode continuar existindo, mas ganhar um div<\/code> extra em volta, e a\u00ed o position: sticky<\/code> para de funcionar porque o elemento pai agora tem overflow: hidden<\/code>.<\/p>\n

O mesmo vale para z-index<\/code>. Se o tema novo cria uma camada de sobreposi\u00e7\u00e3o com z-index<\/code> maior, o menu fixo fica atr\u00e1s dela. Voc\u00ea v\u00ea o cabe\u00e7alho grudar, mas ele some quando abre o menu mobile ou quando um pop-up de cookies aparece.<\/p>\n

Por isso o tema filho \u00e9 obrigat\u00f3rio para CSS pr\u00f3prio. Ele n\u00e3o impede a quebra estrutural, mas mant\u00e9m o seu c\u00f3digo separado, versionado e f\u00e1cil de ajustar quando o tema mudar. Se voc\u00ea administra v\u00e1rios sites, esse detalhe define se a manuten\u00e7\u00e3o \u00e9 de dez minutos ou de uma tarde inteira.<\/p>\n

O efeito colateral que quase ningu\u00e9m testa: \u00e2ncora e topo do conte\u00fado<\/h2>\n

Quando o cabe\u00e7alho fica fixo, ele deixa de ocupar espa\u00e7o no fluxo da p\u00e1gina. O conte\u00fado sobe e o topo fica escondido atr\u00e1s da barra. Em p\u00e1ginas com \u00e2ncora (aquele link que leva para uma se\u00e7\u00e3o espec\u00edfica), o destino tamb\u00e9m para atr\u00e1s do cabe\u00e7alho, e o leitor chega no meio do par\u00e1grafo errado.<\/p>\n

A corre\u00e7\u00e3o costuma ser uma das duas: adicionar scroll-margin-top<\/code> nos elementos que recebem \u00e2ncora, com valor igual ou pouco maior que a altura do cabe\u00e7alho, ou usar padding-top<\/code> no corpo da p\u00e1gina. A primeira \u00e9 mais limpa porque n\u00e3o desloca o layout inteiro.<\/p>\n

No mobile o comportamento muda de novo. Muitos temas trocam o cabe\u00e7alho por uma barra mais baixa com bot\u00e3o hamb\u00farguer. Se o CSS foi escrito pensando s\u00f3 no desktop, o menu aberto pode ficar atr\u00e1s do conte\u00fado, sem bot\u00e3o de fechar acess\u00edvel, ou ocupar a tela inteira sem rolagem. Testar com o menu aberto, n\u00e3o s\u00f3 com a p\u00e1gina rolada, \u00e9 obrigat\u00f3rio.<\/p>\n

Como diagnosticar antes de mexer<\/h2>\n
    \n
  1. Abra o site em uma janela an\u00f4nima e role at\u00e9 o fim. Observe se o cabe\u00e7alho gruda e se algo fica escondido atr\u00e1s dele.<\/li>\n
  2. Inspecione o elemento do cabe\u00e7alho e veja qual classe o tema usa hoje. Anote, porque \u00e9 essa classe que o seu CSS precisa mirar.<\/li>\n
  3. Procure no painel do tema por op\u00e7\u00f5es de cabe\u00e7alho, sticky ou fixed. Se existir, pare aqui e use.<\/li>\n
  4. Se for usar construtor, confirme se o cabe\u00e7alho atual j\u00e1 \u00e9 um template do construtor ou se vem do tema. Isso muda onde a op\u00e7\u00e3o fica.<\/li>\n
  5. Verifique se existe tema filho ativo. Se n\u00e3o existe, crie antes de colar qualquer CSS.<\/li>\n
  6. Teste uma \u00e2ncora real do site, n\u00e3o uma inventada. Use um link interno que j\u00e1 aponte para uma se\u00e7\u00e3o.<\/li>\n<\/ol>\n

    Passo a passo: CSS no tema filho, com teste<\/h2>\n

    Com o tema filho ativo, adicione no style.css<\/code> do filho ou em um arquivo carregado por ele:<\/p>\n

    .site-header {\n  position: sticky;\n  top: 0;\n  z-index: 999;\n}\n\n:target {\n  scroll-margin-top: 90px;\n}\n\n@media (max-width: 782px) {\n  .site-header {\n    position: static;\n  }\n}<\/code><\/pre>\n
    O bloco do mobile desliga o sticky em telas pequenas. Isso evita o menu aberto cobrindo o conte\u00fado e \u00e9 o ajuste que a maioria dos tutoriais esquece. Se o seu tema j\u00e1 tem um cabe\u00e7alho mobile separado, mire a classe dele em vez de desligar tudo.<\/p>\n
    Depois de salvar, limpe o cache do site e o cache do navegador. CSS antigo em cache \u00e9 a causa mais comum de \u201cn\u00e3o funcionou\u201d quando na verdade funcionou.<\/p>\n
    Teste r\u00e1pido de rolagem, \u00e2ncora e menu aberto<\/h3>\n
      \n
    1. Role a p\u00e1gina no desktop e confirme que o cabe\u00e7alho gruda sem pular.<\/li>\n
    2. Clique em uma \u00e2ncora real e veja se o t\u00edtulo da se\u00e7\u00e3o aparece abaixo do cabe\u00e7alho, n\u00e3o atr\u00e1s dele.<\/li>\n
    3. Abra o menu mobile, com a p\u00e1gina rolada, e confirme que o bot\u00e3o de fechar est\u00e1 vis\u00edvel e clic\u00e1vel.<\/li>\n
    4. Role com o menu mobile aberto. Se o fundo rolar junto, o menu n\u00e3o est\u00e1 travando o scroll e vai parecer quebrado.<\/li>\n
    5. Teste em uma p\u00e1gina com formul\u00e1rio ou pop-up. O z-index<\/code> do cabe\u00e7alho n\u00e3o pode competir com eles.<\/li>\n<\/ol>\n
      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\u00e3o pr\u00f3pria para celular, porque a\u00ed o menu fixo deixa de ser s\u00f3 CSS e vira decis\u00e3o de arquitetura: tema mobile WordPress: quando o site precisa de vers\u00e3o pr\u00f3pria<\/a>.<\/p>\n
      Quando N\u00c3O usar menu fixo<\/h2>\n
      Menu fixo n\u00e3o \u00e9 sempre melhor. Em p\u00e1ginas longas de leitura, ele rouba altura \u00fatil e cansa. Em sites com muitos itens de menu, a barra fixa no mobile ocupa espa\u00e7o demais e empurra o conte\u00fado para uma faixa estreita. Em p\u00e1ginas de convers\u00e3o com formul\u00e1rio longo, o cabe\u00e7alho fixo compete com o bot\u00e3o de envio pela aten\u00e7\u00e3o.<\/p>\n
      Tamb\u00e9m n\u00e3o vale for\u00e7ar quando o tema n\u00e3o foi feito para isso. Se o cabe\u00e7alho tem altura vari\u00e1vel, com banner ou aviso que aparece e some, o sticky vai pular conforme a altura muda. Nesse caso, ou voc\u00ea fixa s\u00f3 uma barra secund\u00e1ria, ou aceita que o recurso n\u00e3o combina com o layout.<\/p>\n
      Erros comuns ao replicar em v\u00e1rios sites<\/h2>\n