# Como corrigir o erro de estilo do JetMenu com o tema Astra Pro no WordPress

O erro de estilo do JetMenu com o tema Astra Pro acontece quando o CSS do tema sobrescreve o do menu, quando o cache serve uma folha de estilo antiga ou quando o menu do Astra não foi desativado, fazendo o JetMenu renderizar sem o visual configurado.

## 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).

**Antes de começar:** Antes de editar o functions.php do tema filho, ajustar a otimização do plugin de cache ou desativar o menu do Astra em producao, faça um backup completo do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para reverter caso o header ou o menu quebrem.

## 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.

Erros relacionados

- [Como corrigir o JetMenu que não exibe no mobile](https://full.services/wp-fixer/corrigir-jetmenu-mobile-nao-exibe/)
- [Como corrigir o erro de conexão entre JetEngine e Elementor](https://full.services/wp-fixer/corrigir-conexao-jetengine-elementor/)
- [Como corrigir o JetPopup que não abre no mobile](https://full.services/wp-fixer/corrigir-jetpopup-nao-abre-mobile/)

## 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

1. 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
```

2. 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)
```

3. 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
```

4. 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
```

5. 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
```


## Código

```css
/* 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

Na maioria dos casos o menu primario nativo do Astra ainda esta atribuido ao header, ou as regras de CSS do Astra para o menu vencem as do JetMenu por especificidade. Confirme que o header usa o widget do JetMenu e ajuste o CSS adicional para os itens do menu.

### O cache pode deixar o menu do JetMenu desconfigurado

Sim. Depois de salvar um novo estilo, o plugin de cache ou o Cloudflare pode continuar servindo a folha de estilo antiga do JetMenu, deixando o menu com o visual desatualizado. Limpe todos os caches e recarregue a página com Ctrl+F5 antes de concluir que e um conflito real.

### Como descobrir qual regra do Astra esta sobrescrevendo o JetMenu

Abra o inspetor do navegador (F12), clique no item de menu quebrado e veja na aba Styles a propriedade riscada e o seletor que esta vencendo. Se o seletor for do Astra, como main-header-menu ou ast-header, e conflito de especificidade e você precisa de uma regra mais específica para o JetMenu.

### Devo desativar o menu do Astra para usar o JetMenu

Sim, no Header Builder do Astra Pro você deve remover o elemento de menu primario nativo e colocar o widget do JetMenu no lugar. Manter os dois ativos na mesma localizacao faz o site renderizar o menu do Astra e ignorar o estilo do JetMenu.

### Posso usar !important no CSS para forçar o estilo do JetMenu

Use com parcimonia. O caminho mais limpo e aumentar a especificidade encadeando o container do JetMenu antes do item, em vez de espalhar !important. Excesso de !important dificulta ajustes futuros e pode quebrar estados de hover e do mega menu.

### A minificacao de CSS do WP Rocket atrapalha o JetMenu

Pode atrapalhar. A combinacao e minificacao de CSS as vezes agrega o estilo dinâmico do JetMenu fora de ordem ou o descarta. Desligue a otimização de CSS para testar e, se resolver, adicione os arquivos do JetMenu a lista de exclusão da minificacao.

### O mega menu do JetMenu perde o layout so com o Astra

O layout em colunas do mega menu depende do CSS do JetMenu carregar e vencer o do tema. Com o Astra, garanta que a fonte do menu e o JetMenu, limpe o cache e cheque no inspetor se algum seletor do header do Astra esta zerando o grid dos sub-itens.

**Fonte:** [Crocoblock — JetMenu Knowledge Base](https://crocoblock.com/knowledge-base/jetmenu/)