Como corrigir o erro de estilo do JetMenu com o tema Astra Pro no WordPress
O que é erro de estilo do JetMenu com Astra Pro?
O erro de estilo do JetMenu com o Astra Pro e a situacao em que o menu construido no JetMenu (incluindo mega menus) aparece no site sem o visual definido no editor: cores, espacamentos, fontes e o layout do submenu somem ou ficam diferentes do que foi configurado. O JetMenu, da Crocoblock, gera o estilo do menu a partir das opções visuais salvas e injeta esse CSS no frontend; o Astra, por sua vez, já traz o próprio estilo de navegação do header. Quando os dois disputam os mesmos seletores de menu, o resultado e um menu quebrado ou desconfigurado.
Na prática, a quebra surge de três frentes: especificidade de CSS (o Astra aplica regras ao header e ao menu primario que vencem as do JetMenu), cache (um plugin de cache ou o Cloudflare serve uma versão antiga do CSS depois de uma alteração) e a fonte do menu (o menu primario nativo do Astra continua ativo no lugar do widget do JetMenu). Identificar qual das três esta agindo e o que define a correção.
Como identificar
- O menu aparece como uma lista simples, sem cores de fundo, espacamento ou hover configurados no JetMenu.
- O mega menu abre, mas os sub-itens ficam empilhados sem o grid, as colunas ou os icones definidos no editor do JetMenu.
- As alterações salvas no painel de estilo do JetMenu não refletem no frontend mesmo após recarregar a página.
- O menu fica com a aparencia padrão do Astra (fonte e cor do tema) em vez do estilo do JetMenu.
- No inspetor do navegador, a regra de cor ou espacamento do JetMenu aparece riscada (sobrescrita) por uma regra com seletor do Astra (ast-header, main-header-menu).
Como prevenir
- Use sempre um tema filho do Astra para adicionar CSS e snippets, evitando perder os ajustes do menu a cada atualização do tema.
- Defina uma única fonte de menu para o header: ou o menu nativo do Astra, ou o JetMenu, nunca os dois disputando a mesma localizacao.
- Limpe o cache do plugin e do Cloudflare como último passo de toda alteração de estilo do JetMenu, para não depurar com folha de estilo antiga.
- Mantenha JetMenu, Elementor e Astra Pro atualizados juntos em staging antes de subir para producao, já que mudancas na marcacao do header afetam os seletores do menu.
- Documente os seletores de CSS adicional usados para vencer o Astra, para reaplica-los rapidamente se um update do tema mudar a especificidade.
Causa
- O menu primario nativo do tema Astra continua atribuido a localizacao do header, em vez do widget ou bloco do JetMenu, entao o site renderiza o menu do Astra e ignora o estilo do JetMenu.
- Regras de CSS do Astra para o header (seletores como .main-header-menu e .ast-header) tem maior especificidade e vencem as regras do JetMenu, sobrescrevendo cores, fonte e espacamento do menu.
- Um plugin de cache (WP Rocket, LiteSpeed) ou o Cloudflare esta servindo uma folha de estilo antiga do JetMenu, de antes da última alteração de estilo, deixando o menu com o visual desatualizado.
- A opção de otimização que combina e minifica CSS (no plugin de cache) agregou o CSS dinâmico do JetMenu fora de ordem ou o excluiu da fila, fazendo o estilo do menu não carregar no frontend.
- O JetMenu esta desatualizado em relacao ao Astra Pro e ao Elementor, e uma mudanca de marcacao do header do Astra deixou de casar com os seletores que o JetMenu usa para estilizar o menu.
Como resolver
- Confirme a fonte do menu e desative o menu do Astra: Garanta que a localizacao do header esta usando o JetMenu, e não o menu primario nativo do Astra. No Astra Pro, o JetMenu costuma entrar pelo widget JetMenu dentro do Header Builder ou substituindo o item de menu padrão. Se o menu primario do Astra ainda estiver atribuido, o site renderiza ele e descarta o estilo do JetMenu.
Painel WP -> Aparencia -> Personalizar -> Header Builder (ou Cabeçalho) Remova o elemento de menu primario do Astra e adicione o widget/elemento do JetMenu na área do header Painel WP -> JetPlugins -> JetMenu -> confirme que o menu correto esta selecionado para a localizacao - Limpe todos os caches: Depois de mudar o estilo no JetMenu, limpe o cache do plugin de cache, o cache de objeto e o cache do Cloudflare. O sintoma classico de estilo desatualizado e cache servindo a folha de estilo antiga do menu.
Painel WP -> (WP Rocket / LiteSpeed Cache) -> Limpar cache Cloudflare -> Caching -> Configuration -> Purge Everything No navegador, recarregue com cache desligado (Ctrl+F5) - Exclua o CSS do JetMenu da combinacao e minificacao: Se o plugin de cache combina e minifica CSS, o estilo dinâmico do JetMenu pode estar saindo fora de ordem ou sendo descartado. Desligue a otimização de CSS temporariamente e teste; se resolver, adicione os arquivos do JetMenu a lista de exclusão da minificacao.
Painel WP -> WP Rocket -> Otimização de Arquivos -> desmarque 'Combinar arquivos CSS' e teste Em 'Excluir arquivos CSS', adicione o caminho que contem jet-menu Salve e limpe o cache novamente - Identifique a regra do Astra que sobrescreve no inspetor: Com o cache descartado, abra o site e inspecione o item de menu quebrado. Procure a propriedade riscada (color, background, padding) e veja o seletor que esta vencendo. Se for um seletor do Astra (.main-header-menu, .ast-header), e conflito de especificidade e você precisa de uma regra de CSS mais específica para o JetMenu.
Abra o site, clique com o botão direito no item de menu -> Inspecionar (F12) Na aba Styles, localize a propriedade riscada e o seletor que a sobrescreve Anote o seletor do Astra que esta vencendo para usar no CSS adicional - Adicione um CSS adicional com maior especificidade: No CSS Adicional do Personalizar, escreva uma regra mais específica para os itens do JetMenu, ancorando no container do JetMenu para vencer o seletor do Astra. Evite !important indiscriminado; aumente a especificidade pelo encadeamento de seletores.
Painel WP -> Aparencia -> Personalizar -> CSS Adicional Cole a regra do bloco de código abaixo, ajustando cor e espacamento ao seu projeto Publique e limpe o cache
/* CSS adicional: vence o header do Astra pela especificidade do container do JetMenu */
.jet-menu-container .jet-menu .jet-menu-item > .jet-menu-item__link {
color: #1a1a1a;
padding: 14px 20px;
background-color: transparent;
}
.jet-menu-container .jet-menu .jet-menu-item > .jet-menu-item__link:hover {
color: #ffffff;
background-color: #2563eb;
}
/* Restaura o grid do mega menu se um seletor do Astra zerar o layout */
.jet-menu-container .jet-sub-mega-menu .jet-mega-menu-block-container {
display: flex;
flex-wrap: wrap;
}Perguntas frequentes
Por que o estilo do JetMenu não aplica com o tema Astra Pro
O cache pode deixar o menu do JetMenu desconfigurado
Como descobrir qual regra do Astra esta sobrescrevendo o JetMenu
Devo desativar o menu do Astra para usar o JetMenu
Posso usar !important no CSS para forçar o estilo do JetMenu
A minificacao de CSS do WP Rocket atrapalha o JetMenu
O mega menu do JetMenu perde o layout so com o Astra
Como corrigir o widget Image Comparison no Essential Addons que não funciona no WordPress
O widget Image Comparison do Essential Addons não funciona quando o elemento está desativado no painel do plugin, quando faltam as imagens de antes e depois, ou quando o CSS e JS gerados estão desatualizados e o controle deslizante não inicializa no Elementor.
Como corrigir o Relationship Field no ACF PRO
O Relationship field do ACF PRO que não funciona acontece quando get_field() devolve um array inesperado, o loop com setup_postdata mostra o post errado por falta de wp_reset_postdata, ou a meta_query usa igualdade em vez de LIKE no valor serializado.
Como corrigir o conflito de templates de curso entre Tutor LMS e Elementor
A página de curso fica sem o layout do Elementor (ou mostra o template padrão do Tutor LMS) porque o addon Tutor LMS do Elementor não esta ativo ou a prioridade de template aponta para o template embutido do plugin em vez do seu template Elementor.
Como corrigir o erro “Preview Could Not Be Loaded” no Elementor
O erro "Preview Could Not Be Loaded" aparece quando o editor do Elementor não consegue carregar a página dentro do iframe de preview. O próprio aviso costuma apontar a causa: tema ausente, .htaccess corrompido, código HTTP de erro ou a página de posts definida como página estática.
Como corrigir erros de JavaScript no console ao usar o Elementor
O erro de JavaScript no console do Elementor aparece como mensagens Uncaught no DevTools do navegador (F12) e impede o editor de carregar ou quebra widgets no frontend. A causa quase sempre e outro plugin que duplica ou remove o jQuery, ou um plugin de cache que minifica e combina os arquivos JS do Elementor na ordem errada.
Como corrigir o erro do Business Hours no Ultimate Addons no WordPress
O erro do Business Hours no Ultimate Addons aparece quando o widget de horario de funcionamento não carrega no editor, destaca o dia errado como aberto ou exibe horarios diferentes dos configurados, quase sempre por fuso horario do WordPress incorreto, cache antigo ou conflito de JavaScript.
Saúde e Bem-Estar
Restaurantes & Alimentação
Hotelaria & Turismo
Imobiliárias & Construção
Negócios Locais & Franquias
E-commerce & Lojas Virtuais
Educação & Cursos
Profissionais Liberais & Serviços
Agências Digitais & Freelancers
MEIs e Autônomos
Agências e Freelancers
Pequenas Empresas
Startups
Franquias
Elementor PRO
Rank Math
SEOPress
Happy Addons
Tutor LMS
WP Optimize
Crocoblock
WP Rocket
Ultimate Addons
Perfmatter
Funnel Kit
AIOS
Astra PRO
ACF
Essential Addons
WP Forms
UpdraftPlus
Ver mais
FULL CRM 
FULL Widget
FULL Woo
FULL Pop-up
FULL Security
FULL NPS
FULL Update
FULL Social Proof
FULL Analytics
FULL Templates
FULL Creator AI
FULL Backup
FULL Safe Login
FULL SMTP
FULL Monitor
FULL Speed
FULL Cache
FULL Whitelabel
