Astra Transparent Header não funciona no mobile: como corrig

Tipo Page Builders

Nome do erro Transparent Header do Astra Pro não funciona no mobile EN: Astra Pro Transparent Header not working on mobile

Severidade Atenção

Descrição O Astra Transparent Header não funciona no mobile quando a opção Ativar Em está limitada ao desktop, quando uma configuração por página desativa o recurso, ou quando o ponto de quebra do menu foi aumentado e o cabeçalho perde a cor entre 768px e esse valor. A correção é alinhar a opção de dispositivo e o ponto de quebra.

O que é o Astra Transparent Header que não funciona no mobile?

O cabeçalho transparente do Astra Pro sobrepõe o header ao conteúdo do topo da página, sem fundo, deixando a imagem ou o banner aparecer atrás do menu e do logo. No Astra esse recurso tem controle por dispositivo: você decide se ele vale para Desktop, Mobile ou Desktop + Mobile. Quando alguém diz que o Transparent Header não funciona no mobile, quase sempre o desktop está correto e o celular cai no header normal, com fundo sólido. Isso acontece porque o cabeçalho transparente é, na prática, uma classe aplicada ao body (ast-theme-transparent-header) que só entra quando as condições de dispositivo, de página e de ponto de quebra do menu batem. Se qualquer uma dessas condições exclui o mobile, o efeito some no celular enquanto continua no desktop.

Como identificar

No desktop o cabeçalho aparece transparente sobre o banner, mas no celular o mesmo header carrega com fundo sólido (branco ou colorido).
O logo transparente e a cor de texto clara definidos para o cabeçalho transparente só valem no desktop; no mobile volta o logo e a cor padrão.
Numa faixa de largura específica (de 768px até o ponto de quebra do menu) o menu do cabeçalho transparente perde a cor e fica ilegível, mesmo com o transparente ativo.
Em uma página específica o cabeçalho transparente não aparece em nenhum dispositivo, enquanto em outras páginas funciona no desktop.
Ao inspecionar a página no celular, a tag body não tem a classe ast-theme-transparent-header, que está presente quando você abre a mesma página no desktop.

Como prevenir

Ao ativar o cabeçalho transparente, sempre defina a opção Ativar Em como Desktop + Mobile e teste nos dois tamanhos antes de publicar.
Evite aumentar o ponto de quebra do menu sem testar o cabeçalho transparente na faixa de 768px até o novo valor.
Quando desabilitar o transparente em uma página, anote a alteração, porque o meta da página continua valendo mesmo se você mudar o global depois.
Limpe o cache toda vez que mexer nas opções do cabeçalho para não validar o resultado em um HTML antigo servido ao celular.

Causa

A opção Ativar Em do cabeçalho transparente está como Desktop em Personalizar -> Cabeçalho -> Cabeçalho Transparente, em vez de Mobile ou Desktop + Mobile, então o efeito nunca entra no celular.
Uma configuração por página (Configurações Avançadas do ícone Astra -> Cabeçalho Transparente -> aba Desabilitado) sobrepõe o Personalizar e desliga o transparente naquela página, inclusive no mobile, porque o meta da página tem prioridade sobre o global.
O ponto de quebra do menu foi aumentado acima de 768px, e o cabeçalho transparente perde a cor do menu na faixa de 768px até o novo ponto de quebra, problema documentado pelo Astra.
No Astra 3.0 ou superior o site usa o Construtor de Cabeçalho e Rodapé, e o tipo de cabeçalho Off-Canvas ou Mobile não tem o cabeçalho transparente habilitado para o dispositivo móvel em Personalizar -> Construtor de Cabeçalho.
Um plugin de cache ou de otimização entregou ao celular um HTML ou um CSS antigo, gerado antes de você ativar o cabeçalho transparente para mobile, então o navegador do visitante ainda recebe a versão sem a classe transparente.

Como resolver

Confira a opção de dispositivo no Personalizar: Abra as opções do cabeçalho transparente e veja em qual dispositivo o recurso está liberado. Para valer no celular, a opção Ativar Em precisa estar como Mobile ou como Desktop + Mobile, não apenas Desktop.
```
Painel WP -> Aparência -> Personalizar -> Cabeçalho -> Cabeçalho Transparente -> Ativar Em -> Desktop + Mobile
```
Verifique se a página desativou o transparente: A configuração por página tem prioridade sobre o Personalizar. Abra a página que está com problema no editor e confira a opção de cabeçalho transparente do Astra. Se estiver na aba Desabilitado, mude para o padrão ou para habilitado.
```
Editor da página -> ícone Astra (Configurações da Página) -> Configurações Avançadas -> Cabeçalho Transparente -> Habilitado
```
Cheque o ponto de quebra do menu: Se você aumentou o ponto de quebra do menu, a cor do cabeçalho transparente falha entre 768px e esse valor. Confirme o ponto de quebra atual e, se possível, volte para o padrão do Astra para testar se a cor do menu transparente volta no celular.
```
Painel WP -> Aparência -> Personalizar -> Cabeçalho -> Menu Principal -> Ponto de Quebra do Menu
```
Ajuste o cabeçalho transparente no Construtor (Astra 3.0+): Se o site usa o Construtor de Cabeçalho e Rodapé, o cabeçalho do celular é montado em Tipos de Cabeçalho. Garanta que o tipo de cabeçalho usado no mobile tenha o cabeçalho transparente habilitado para esse dispositivo.
```
Painel WP -> Aparência -> Personalizar -> Construtor de Cabeçalho -> Tipos de Cabeçalho -> Mobile -> Cabeçalho Transparente
```
Limpe o cache e recarregue no celular: Depois de ajustar as opções, limpe o cache do plugin de cache, do host e do Cloudflare, se houver. Recarregue a página em um celular real ou no modo dispositivo do navegador para confirmar que a classe transparente entrou.
```
Painel WP -> plugin de cache -> Limpar cache
wp cache flush
```

PHP

// functions.php do tema-filho — desativa o cabecalho transparente do Astra abaixo de 768px
// Usa o filtro oficial astra_transparent_header_disable do Astra Pro (Cabecalhos Avancados)
add_filter( 'astra_transparent_header_disable', function( $disable ) {
	if ( wp_is_mobile() ) {
		return true; // forca o header normal no mobile
	}
	return $disable;
} );

Perguntas frequentes

Por que o cabeçalho transparente do Astra funciona no desktop mas não no celular

Quase sempre porque a opção Ativar Em do cabeçalho transparente está limitada a Desktop. O Astra controla esse recurso por dispositivo, então o efeito só entra no celular quando a opção está como Mobile ou Desktop + Mobile. Ajuste essa opção no Personalizar e o transparente volta no mobile.

Como habilitar o cabeçalho transparente só no mobile no Astra

Abra Aparência -> Personalizar -> Cabeçalho -> Cabeçalho Transparente e mude a opção Ativar Em para Mobile. Se você quer nos dois tamanhos, escolha Desktop + Mobile. No Construtor de Cabeçalho e Rodapé, confirme também que o tipo de cabeçalho usado no celular tem o transparente habilitado.

Por que a cor do menu transparente some numa largura específica

É um comportamento documentado pelo Astra: quando você aumenta o ponto de quebra do menu, a cor do cabeçalho transparente não é aplicada na faixa de 768px até esse novo ponto de quebra. Voltar o ponto de quebra para o padrão ou ajustar a cor por CSS nessa faixa resolve.

Mudei o global mas uma página continua sem o transparente. Por quê

A configuração por página tem prioridade sobre o Personalizar no Astra. Se a aba Desabilitado está marcada nas Configurações Avançadas daquela página, ela ignora o global, inclusive no mobile. Abra a página no editor e mude a opção do cabeçalho transparente do Astra para habilitado.

Onde fica a opção de cabeçalho transparente por página no Astra

No editor da página, clique no ícone do Astra (Configurações da Página), abra Configurações Avançadas e localize Cabeçalho Transparente. Ali você escolhe entre o padrão, habilitado ou a aba Desabilitado para aquela página específica, sem afetar o resto do site.

Preciso do Astra Pro para o cabeçalho transparente no mobile

O cabeçalho transparente em si está disponível no Astra, mas os controles avançados de dispositivo, logo transparente e cores específicas vêm do Astra Pro com o complemento de Cabeçalhos Avançados. Para o ajuste fino por dispositivo no celular, mantenha o Astra Pro ativo e licenciado.

Ativei o transparente no mobile e nada mudou no celular. O que falta

Limpe o cache do plugin de cache, do host e do Cloudflare e recarregue a página em um celular real. Plugins de cache costumam servir ao mobile um HTML antigo, gerado antes da sua alteração, sem a classe ast-theme-transparent-header. Após limpar o cache, inspecione a tag body e confirme se a classe está presente.

Como confirmo que o cabeçalho transparente entrou na página

Abra a página no celular ou no modo dispositivo do navegador, inspecione o elemento e olhe a tag body. Quando o cabeçalho transparente está ativo, o Astra adiciona a classe ast-theme-transparent-header ao body. Se essa classe não aparece no mobile mas aparece no desktop, a condição de dispositivo está excluindo o celular.

Grave

Como corrigir o conflito entre Elementor e WP Rocket no WordPress

O conflito entre Elementor e WP Rocket aparece quando a otimização de JavaScript e CSS do cache atinge os arquivos do construtor: o editor do Elementor não abre, o layout quebra no frontend ou widgets e icones somem ao limpar o cache. A causa não e bug de nenhum dos dois, e otimização agressiva sobre o que o Elementor precisa.

Grave

Como corrigir o Happy Addons que não carrega no Elementor

Quando o Happy Addons não carrega, os widgets do plugin somem do painel do editor Elementor, em geral porque foram desativados no Feature Controller, porque a versão do Elementor ficou abaixo da exigida ou porque o cache de assets do editor ficou desatualizado.

Atenção

Como corrigir o erro de permissão ao criar Custom Fields no JetEngine

O JetEngine erro de permissão ao criar Custom Fields ocorre quando o usuário logado não tem a capability manage_options exigida pelos menus do JetEngine, quando um plugin de segurança bloqueia o admin-ajax que salva os campos, ou quando a regra de acesso de um Custom Content Type nega a operacao.

Grave

Como corrigir o JetFormBuilder que não envia formulários

Quando o JetFormBuilder não envia o formulário, o problema quase sempre está na ação Send Email ausente, no Submit Type errado, num captcha mal configurado ou no envio de e-mail do WordPress sem SMTP. Cada causa tem um sintoma distinto.

Grave

Como corrigir o erro de query no JetEngine quando o Listing não filtra

Quando o JetEngine Listing não filtra, o filtro do JetSmartFilters dispara, o grid recarrega, mas os mesmos itens continuam na tela. A causa quase sempre e o Query ID divergente entre o filtro e o Listing Grid, uma Custom Query do Query Builder sem o mesmo Query ID, ou o provider apontando para a listagem errada.

Grave

Como corrigir o Repeater Field que não salva dados no ACF PRO

O Repeater que não salva no ACF PRO quase sempre perde as últimas linhas porque o PHP descarta variáveis quando o número de campos enviados passa de max_input_vars (padrão 1000). Cada linha do Repeater vira vários campos no POST, então um Repeater grande estoura o limite e grava só parte das linhas, sem erro na tela.

Setores

Extensões

Integrações

Como corrigir o Transparent Header que não funciona no mobile no Astra Pro

O que é o Astra Transparent Header que não funciona no mobile?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o conflito entre Elementor e WP Rocket no WordPress

Como corrigir o Happy Addons que não carrega no Elementor

Como corrigir o erro de permissão ao criar Custom Fields no JetEngine

Como corrigir o JetFormBuilder que não envia formulários

Como corrigir o erro de query no JetEngine quando o Listing não filtra

Como corrigir o Repeater Field que não salva dados no ACF PRO

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