Astra mobile menu não funciona: como corrigir

Tipo Page Builders

Nome do erro Mobile Menu não funciona no Astra Pro EN: Astra Pro Mobile Menu not working

Severidade Atenção

Descrição O Astra mobile menu não funciona quando o componente Off Canvas não esta na linha Mobile Header do Header Builder, quando o Header Breakpoint esta abaixo da largura do dispositivo ou quando o plugin de cache combina o JavaScript do Astra e quebra o Toggle Button, deixando o hamburguer sem abrir o painel no celular.

O que é o Astra mobile menu que não funciona?

O Astra mobile menu que não funciona e a falha em que o icone de hamburguer some no celular ou aparece mas não abre o painel de navegação. No Astra Pro o menu mobile e montado pelo Header Builder: a largura definida em Header Breakpoint decide a partir de quantos pixels o menu desktop colapsa para o icone de hamburguer, e o componente Off Canvas, posicionado na linha Mobile Header, e o painel que desliza quando o Toggle Button e tocado. Quando o Off Canvas não esta na linha mobile, quando o breakpoint esta mal calibrado ou quando o JavaScript do Astra e combinado pelo cache, o toque no hamburguer não tem efeito e a navegação fica inacessivel no smartphone.

Como identificar

No celular, o icone de hamburguer aparece no cabeçalho mas, ao tocar, o painel de navegação não desliza e nada acontece.
O icone de hamburguer nem aparece no mobile: o menu continua na horizontal cortado, ou some por inteiro abaixo de uma certa largura de tela.
O Toggle Button abre um painel vazio, sem nenhum item de menu, porque o componente Off Canvas esta sem o menu atribuido.
No console do navegador (F12) surge um erro de JavaScript do tipo ‘astra is not defined’ ou ‘Uncaught TypeError’ logo ao tocar no hamburguer.
O menu mobile funciona no preview do Customizer, mas para de abrir no site publicado depois que o cache ou a otimização de JS e ativada.

Como prevenir

Mantenha o tema Astra e o Astra Pro sempre atualizados para preservar o Mobile Header e o Off Canvas do Header Builder
Sempre que configurar o cache, exclua os scripts do Astra da combinacao e do delay de JavaScript desde o inicio
Depois de qualquer ajuste no menu, teste o hamburguer em um celular real e no modo responsivo do navegador antes de publicar
Confirme que ha um menu atribuido ao local Off Canvas em Aparencia -> Menus toda vez que criar um novo menu

Causa

Componente Off Canvas ausente da linha Mobile Header no Header Builder do Astra, deixando o Toggle Button sem painel para acionar quando o icone de hamburguer e tocado.
Header Breakpoint definido abaixo da largura do dispositivo em Aparencia -> Personalizar -> Header Builder -> Mobile Header, fazendo o menu nunca colapsar para o hamburguer em tablets e celulares maiores.
Combinacao ou minificacao do JavaScript do Astra pelo plugin de cache (WP Rocket, LiteSpeed, W3 Total Cache) removendo o script que liga o Toggle Button ao Off Canvas.
Menu não atribuido ao componente Off Canvas: o painel mobile abre vazio porque nenhum local de menu foi vinculado ao Off Canvas em Aparencia -> Menus.
Tema Astra ou complemento Astra Pro desatualizados, em versão anterior a que separou o Mobile Header do desktop no Header Builder, gerando o menu mobile antigo sem o Off Canvas.
Erro de JavaScript de outro plugin interrompendo a fila de scripts antes do astra-theme-js carregar, o que impede o handler do hamburguer de ser registrado na página.

Como resolver

Adicione o componente Off Canvas a linha Mobile Header: abra o Header Builder do Astra e confira a linha do cabeçalho mobile. O Off Canvas e o painel que desliza no celular e precisa estar posicionado junto ao Toggle Button, senao o hamburguer não tem o que abrir.
```
Aparencia -> Personalizar -> Header Builder -> aba Mobile
Arraste o componente Off Canvas para a linha Mobile Header, ao lado do Toggle Button
```
Atribua o menu ao Off Canvas e ao local mobile: garanta que existe um menu vinculado ao painel mobile. Sem um menu atribuido ao local do Off Canvas, o painel desliza vazio mesmo com o Toggle funcionando.
```
Aparencia -> Menus -> aba Gerenciar locais
Vincular o menu desejado ao local Off Canvas / Mobile Menu
```
Calibre o Header Breakpoint: ajuste a largura em que o menu desktop vira hamburguer. Se o breakpoint estiver baixo demais, tablets e celulares grandes nunca recebem o icone de hamburguer e ficam com o menu desktop cortado.
```
Aparencia -> Personalizar -> Header Builder -> Mobile Header -> Header Breakpoint
Defina um valor próximo de 921 px para cobrir tablets e celulares
```
Exclua o JavaScript do Astra da combinacao do cache: no plugin de cache, exclua os scripts do Astra da combinacao e do adiamento (delay) de JavaScript, limpe o cache do site e do CDN e recarregue sem cache do navegador. A combinacao agressiva quebra o handler do Toggle Button.
```
No plugin de cache: excluir astra-theme-js e /astra-addon/ da combinacao e do delay de JS
Limpar cache do site + cache do CDN/Cloudflare
Recarregar com Ctrl+F5 (sem cache do navegador)
```
Atualize o Astra e isole conflito de JS: atualize o tema Astra e o Astra Pro para a versão mais recente e abra o console do navegador para checar erros de JavaScript de outros plugins. Um erro anterior na fila de scripts impede o handler do hamburguer de registrar.
```
Painel -> Atualizações -> atualizar Astra e Astra Pro
Abrir F12 -> aba Console -> tocar no hamburguer e ler o primeiro erro em vermelho
```

CSS

/* Forca o painel Off Canvas do Astra a ficar visivel quando um CSS de tema/plugin o ocultou apos o toque no Toggle Button. Cole em Aparencia > Personalizar > CSS adicional. */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
    transform: none !important;
    visibility: visible !important;
    opacity: 1;
}

.ast-header-break-point .main-header-menu-toggle {
    display: flex !important;
}

Perguntas frequentes

O icone de hamburguer aparece mas não abre. O que e?

Quase sempre o JavaScript do Astra foi combinado ou adiado pelo plugin de cache, quebrando o handler do Toggle Button, ou o componente Off Canvas não esta na linha Mobile Header. Exclua os scripts do Astra da combinacao de JS, confira o Off Canvas no Header Builder e recarregue com Ctrl+F5 para testar.

O icone de hamburguer nem aparece no celular. Por que?

Costuma ser o Header Breakpoint definido baixo demais. Esse valor decide a partir de qual largura o menu desktop colapsa para o hamburguer. Va em Aparencia -> Personalizar -> Header Builder -> Mobile Header e aumente o breakpoint para uma largura que cubra tablets e celulares grandes.

O painel mobile abre vazio, sem itens. Como resolver?

O Off Canvas esta sem menu atribuido. Va em Aparencia -> Menus, abra a aba Gerenciar locais e vincule o menu desejado ao local do Off Canvas ou Mobile Menu. Depois salve e recarregue a página no celular para confirmar que os itens passam a aparecer no painel.

Preciso do Astra Pro para ter o menu Off Canvas?

O Header Builder com Mobile Header separado e o componente Off Canvas dependem do Astra Pro ativo e licenciado. O tema Astra gratuito oferece um menu mobile mais simples sem o painel deslizante completo. Confirme que o Astra Pro esta instalado, ativado e com a licenca valida antes de configurar o Off Canvas.

O menu funciona no preview mas para no site publicado. O que mudou?

O preview do Customizer ignora o plugin de cache, entao o erro so aparece no site publicado. A causa e o cache combinando ou adiando o JavaScript do Astra. Exclua os scripts do Astra da combinacao e do delay de JS, limpe o cache do site e do CDN e recarregue com Ctrl+F5 para confirmar.

Como descubro se ha conflito de JavaScript com outro plugin?

Abra o console do navegador com F12, va na aba Console e toque no hamburguer. Se aparecer um erro em vermelho como 'astra is not defined' ou um TypeError de outro plugin, ele esta interrompendo a fila de scripts antes do Astra. Desative os plugins suspeitos um a um até o menu voltar a abrir.

Qual valor usar no Header Breakpoint do Astra?

Depende do seu menu, mas um ponto de partida seguro fica próximo de 921 px, que faz o hamburguer aparecer em tablets e celulares. Se o menu desktop tem muitos itens e já quebra em telas maiores, aumente o breakpoint. Teste no modo responsivo do navegador até o menu desktop colapsar na hora certa.

Atenção

Como corrigir o JetMenu que não exibe no mobile no WordPress

O JetMenu não exibe no mobile quando o layout de menu mobile esta desativado, o breakpoint não bate com a largura da tela, ou cache e conflito de tema escondem o gatilho hamburguer após uma atualização do plugin ou do Elementor.

Grave

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.

Informativo

Como corrigir os estilos do WPForms que não aplicam com o Astra Pro no WordPress

Quando o estilo do WPForms não aplica com o Astra Pro, o formulário aparece sem CSS porque a opção Include Form Styling esta em No styling, o CSS do tema vence por especificidade, ou o cache combinou e removeu a folha de estilo do WPForms.

Atenção

Como corrigir o erro do Image Grid no Happy Addons

O erro do Image Grid no Happy Addons acontece quando o widget está desativado no Feature Controller, o Elementor está desatualizado ou um cache antigo serve o CSS e o JavaScript errados, fazendo o widget sumir do editor, as imagens não aparecerem ou o layout masonry quebrar.

Atenção

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.

Grave

Como corrigir o JetSmartFilters AJAX que não retorna resultados

O JetSmartFilters AJAX que não retorna resultados aplica o filtro, dispara a chamada ao admin-ajax.php, mas o Listing Grid volta vazio ou sem mudar. A causa quase sempre e o Query ID do filtro diferente do provider, o indexer não gerado, ou o cache servindo a página antiga.

Setores

Extensões

Integrações

Como corrigir o erro do Mobile Menu no Astra Pro

O que é o Astra mobile menu que não funciona?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o JetMenu que não exibe no mobile no WordPress

Como corrigir o erro “Preview Could Not Be Loaded” no Elementor

Como corrigir os estilos do WPForms que não aplicam com o Astra Pro no WordPress

Como corrigir o erro do Image Grid no Happy Addons

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

Como corrigir o JetSmartFilters AJAX que não retorna resultados

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos