--- title: "Como corrigir o Transparent Header que não funciona no mobile no Astra Pro" url: https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/ date: 2026-06-17 author: "Clayton Margiotti" --- # 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? 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. Erros relacionados - [Como corrigir o erro de Header/Footer no Astra Pro após atualização](https://full.services/wp-fixer/corrigir-header-footer-astra-pro/) - [Como corrigir o erro do Mobile Menu no Astra Pro](https://full.services/wp-fixer/corrigir-mobile-menu-astra-pro/) - [Como corrigir o Mega Menu que não exibe submenus no Astra Pro](https://full.services/wp-fixer/corrigir-mega-menu-submenus-astra-pro/) --- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services/", "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023", "Gold Medal - The WP Weekly Awards 2024" ], "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "TechArticle", "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/#article", "headline": "Como corrigir o Transparent Header que não funciona no mobile no Astra Pro", "url": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/", "inLanguage": "pt-BR", "datePublished": "2026-06-17T12:39:08-03:00", "dateModified": "2026-06-17T12:39:29-03:00", "author": { "@id": "https://full.services/#org" }, "publisher": { "@id": "https://full.services/#org" }, "isAccessibleForFree": false, "about": [ { "@type": "Thing", "@id": "https://www.wikidata.org/wiki/Q13166", "name": "WordPress", "sameAs": "https://www.wikidata.org/wiki/Q13166", "url": "https://wordpress.org/" }, { "@type": "Thing", "name": "Page Builders" } ], "mentions": { "@type": "Thing", "@id": "https://www.wikidata.org/wiki/Q13166", "name": "WordPress", "sameAs": "https://www.wikidata.org/wiki/Q13166", "url": "https://wordpress.org/" }, "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/" }, "wordCount": 855, "description": "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.", "articleSection": "Page Builders", "keywords": "astra cabecalho transparente nao aparece tablet, astra menu transparente nao funciona no celular, astra transparent header sumiu no celular, habilitar cabecalho transparente mobile astra, transparent header astra header footer builder mobile", "proficiencyLevel": "Intermediate", "citation": { "@type": "CreativeWork", "url": "https://wpastra.com/docs/transparent-header-for-hfb/", "name": "Astra — Transparent Header for HFB" }, "mainEntity": { "@type": "SoftwareSourceCode", "name": "Como corrigir o Transparent Header que não funciona no mobile no Astra Pro", "programmingLanguage": "PHP", "codeRepository": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/", "isAccessibleForFree": false } }, { "@type": "FAQPage", "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/#faq", "isPartOf": { "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/#article" }, "isAccessibleForFree": true, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/#faq-q1", "name": "Por que o cabeçalho transparente do Astra funciona no desktop mas não no celular", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/#faq-q2", "name": "Como habilitar o cabeçalho transparente só no mobile no Astra", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/#faq-q3", "name": "Por que a cor do menu transparente some numa largura específica", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "É 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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/#faq-q4", "name": "Mudei o global mas uma página continua sem o transparente. Por quê", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/#faq-q5", "name": "Onde fica a opção de cabeçalho transparente por página no Astra", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/#faq-q6", "name": "Preciso do Astra Pro para o cabeçalho transparente no mobile", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/#faq-q7", "name": "Ativei o transparente no mobile e nada mudou no celular. O que falta", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-transparent-header-mobile-astra-pro/#faq-q8", "name": "Como confirmo que o cabeçalho transparente entrou na página", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } } ] } ] } ```