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

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.

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.

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

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.

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.

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.

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.

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.