Astra sticky header Safari: corrigir cabeçalho fixo

Tipo Page Builders

Nome do erro Sticky Header do Astra Pro não gruda no Safari EN: Astra Pro sticky header not working in Safari

Severidade Atenção

Descrição O Astra sticky header não funciona no Safari quando o módulo Sticky Header do Astra Pro não está ativo para o dispositivo, quando um ancestral do cabeçalho usa overflow ou transform que invalida o position sticky no WebKit, ou quando CSS e cache antigos do tema continuam sendo servidos ao navegador da Apple.

O que é Sticky Header do Astra Pro no Safari?

O Astra sticky header é o cabeçalho fixo entregue pelo módulo Sticky Header do Astra Pro: ao rolar a página, o cabeçalho deixa de rolar junto e gruda no topo da janela. No Astra ele é configurado pelo Personalizar (Customizer), dentro do construtor de cabeçalho, com opções para ativar o efeito por dispositivo (desktop, tablet e mobile) e ajustes como reduzir o cabeçalho ao rolar. O Safari, da Apple, usa o motor WebKit e é mais rígido na implementação de cabeçalhos fixos do que o Chrome ou o Firefox.

A incompatibilidade aparece quando esse cabeçalho funciona no Chrome mas não gruda no Safari do macOS ou do iPhone: o cabeçalho rola junto com a página, pisca, fica sobreposto ao conteúdo ou simplesmente ignora o efeito. Na maioria dos casos a causa não é um defeito do Astra, e sim a forma como o WebKit trata position sticky e propriedades CSS como overflow e transform em elementos ancestrais, somada a CSS e cache antigos que o Safari continua servindo após uma alteração no tema.

Como identificar

O cabeçalho gruda no topo normalmente no Chrome e no Firefox, mas no Safari rola junto com a página como se o efeito sticky não existisse.
No Safari do iPhone ou do iPad o cabeçalho some ao rolar para baixo e só reaparece quando a rolagem para, em vez de ficar fixo o tempo todo.
O cabeçalho fixo aparece sobreposto ao conteúdo ou pisca durante a rolagem apenas no Safari, enquanto nos demais navegadores fica estável.
O efeito de encolher o cabeçalho ao rolar funciona em outros navegadores, mas no Safari o cabeçalho fica travado no tamanho cheio ou na altura errada.
No console do Safari (Desenvolver e Mostrar Console JavaScript) o cabeçalho aparece com position sticky aplicado, mas o elemento não permanece fixo ao rolar.

Antes de começar: Antes de editar CSS Adicional, alternar plugins ou mexer no tema filho em produção, faça um backup do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para poder reverter caso o cabeçalho ou o layout quebrem no Safari.

Como prevenir

Sempre que ajustar o cabeçalho no Astra Pro, teste no Safari do macOS e no Safari do iPhone, não apenas no Chrome, porque o WebKit é mais rígido com position sticky.
Evite aplicar overflow hidden, transform ou will-change em containers que envolvem o cabeçalho, pois essas propriedades invalidam o sticky no Safari.
Ative o Sticky Header por dispositivo de forma consistente no construtor de cabeçalho, cobrindo desktop, tablet e mobile, para o efeito não falhar só no Safari mobile.
Após qualquer alteração no cabeçalho, limpe o cache do plugin de cache e do navegador antes de validar, para garantir que o Safari recebe o CSS novo do Astra.

Causa

O módulo Sticky Header do Astra Pro está desativado para o dispositivo testado: a opção de ativar o sticky por dispositivo no construtor de cabeçalho do Personalizar está marcada só para desktop, então o Safari do iPhone ou do tablet não recebe o efeito.
Um elemento ancestral do cabeçalho tem a propriedade overflow definida como hidden, auto ou scroll: o WebKit do Safari invalida o position sticky de qualquer filho cujo container de rolagem tenha overflow recortado, e o cabeçalho deixa de grudar.
Um ancestral do cabeçalho aplica transform, filter ou will-change via CSS do tema ou de outro plugin: no Safari essas propriedades criam um novo bloco de contexto que faz o cabeçalho fixo se ancorar nesse ancestral em vez de na janela, quebrando o sticky.
O Safari está servindo CSS antigo do Astra a partir do cache do navegador ou de um plugin de cache, então a alteração feita no Customizer não chega ao WebKit e o cabeçalho continua com o comportamento anterior.
Há altura insuficiente ou conteúdo curto na página: se o conteúdo não gera rolagem suficiente, o WebKit do Safari não dispara o estado fixo do cabeçalho, dando a impressão de que o sticky não funciona.

Como resolver

Confirme o módulo Sticky Header ativo por dispositivo: No Astra Pro, abra o construtor de cabeçalho no Personalizar e confirme que o Sticky Header está ativado para o mesmo dispositivo em que o Safari falha (desktop, tablet ou mobile). Um efeito ligado só no desktop não gruda o cabeçalho no Safari do iPhone.
```
Painel WP -> Aparência -> Personalizar -> Cabeçalho (Header Builder)
Abra as opções de Sticky Header do cabeçalho
Marque Ativar em Desktop, Tablet e Mobile conforme o dispositivo testado
Clique em Publicar
```
Teste com cache limpo no Safari: Limpe o cache do plugin de cache e do Safari e recarregue a página, para garantir que o WebKit recebe o CSS atual do Astra e não a versão anterior do cabeçalho.
```
Limpe o cache do plugin de cache do site (ex.: WP Rocket -> Limpar cache)
Safari -> menu Desenvolver -> Esvaziar Caches
Recarregue a página segurando Shift (recarga forçada)
```
Localize o ancestral que quebra o sticky no WebKit: No Safari, abra o inspetor (Desenvolver e Mostrar Inspetor da Web), selecione o cabeçalho e suba pelos elementos pais procurando overflow diferente de visible ou transform aplicado. Esse ancestral é o que invalida o position sticky no Safari.
```
Safari -> Desenvolver -> Mostrar Inspetor da Web (Cmd+Option+I)
Selecione o elemento do cabeçalho (ex.: .ast-sticky-active ou #masthead)
Nos pais, procure overflow: hidden/auto/scroll ou transform/filter/will-change
```
Neutralize overflow e transform do ancestral via CSS adicional: Adicione um CSS direcionado ao container pai identificado para devolver overflow visible e remover transform, restaurando a referência do position sticky à janela no Safari. Use o seletor real do seu site no lugar do exemplo.
```
Painel WP -> Aparência -> Personalizar -> CSS Adicional
Cole a regra ajustando o seletor do ancestral (ver bloco de código abaixo)
Clique em Publicar e recarregue no Safari com cache limpo
```
Isole conflito de plugin ou tema filho: Se o cabeçalho ainda não grudar no Safari, desative os demais plugins um a um e teste sem o CSS do tema filho, recarregando no Safari a cada passo até identificar o que aplica overflow ou transform no ancestral do cabeçalho.
```
Painel WP -> Plugins -> desative os demais plugins um a um
Desative temporariamente o CSS do tema filho que afete o cabeçalho
Recarregue no Safari a cada teste até o sticky voltar a funcionar
```

CSS

/* Restaura o sticky do cabecalho no Safari (WebKit). */
/* Devolve overflow visible ao container que invalida o sticky. */
.site-content,
.ast-container,
#page {
  overflow: visible;
}

/* Remove transform/filter de ancestrais que criam contexto de posicionamento. */
#page,
.site-header-focus-item {
  transform: none;
  filter: none;
  will-change: auto;
}

/* Garante a ancoragem do cabecalho no topo da janela. */
.ast-primary-sticky-header-active #masthead,
.ast-header-sticked #masthead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

Perguntas frequentes

Por que o sticky header do Astra funciona no Chrome mas não no Safari

Porque o Safari usa o motor WebKit, que é mais rígido na implementação de position sticky. Se um elemento ancestral do cabeçalho tem overflow recortado ou transform aplicado, o WebKit invalida o sticky, enquanto o Chrome ainda o mantém. Localize esse ancestral no inspetor e neutralize a propriedade.

Como ativo o sticky header do Astra Pro no Safari do iPhone

No Personalizar, dentro do construtor de cabeçalho do Astra Pro, abra as opções de Sticky Header e ative o efeito também para tablet e mobile, não só desktop. Um sticky ligado apenas no desktop não gruda o cabeçalho no Safari do iPhone.

O overflow hidden quebra o sticky header no Safari

Sim. No WebKit do Safari, um elemento com position sticky deixa de grudar se qualquer container de rolagem ancestral tiver overflow definido como hidden, auto ou scroll. Devolver overflow visible ao ancestral correto costuma restaurar o cabeçalho fixo.

Por que o transform no CSS atrapalha o cabeçalho fixo no Safari

Porque transform, filter e will-change criam um novo bloco de contexto de posicionamento. No Safari, o cabeçalho sticky passa a se ancorar nesse ancestral em vez de na janela, então ele rola junto com a página. Remover essas propriedades do ancestral resolve.

Limpar o cache resolve o sticky header que não funciona no Safari

Em parte dos casos sim. O Safari pode estar servindo CSS antigo do Astra a partir do cache do navegador ou do plugin de cache, ignorando a alteração feita no Customizer. Limpe ambos os caches e recarregue segurando Shift antes de concluir que há outro problema.

Como descubro qual elemento quebra o sticky no Safari

Abra o Inspetor da Web do Safari pelo menu Desenvolver, selecione o cabeçalho e suba pelos elementos pais procurando overflow diferente de visible ou transform aplicado. O primeiro ancestral com uma dessas propriedades é o que invalida o position sticky.

Preciso de JavaScript para o sticky header do Astra funcionar no Safari

Não necessariamente. O efeito sticky do Astra se apoia em CSS com position sticky, e o ajuste correto de overflow e transform no ancestral costuma bastar. JavaScript só entra em casos específicos de encolher o cabeçalho ao rolar, que o próprio módulo do Astra Pro já controla.

Atenção

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

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.

Atenção

Como corrigir a Conditional Logic que não funciona no ACF PRO

A Conditional Logic do ACF PRO que não funciona quase sempre vem do campo de gatilho que não guarda um valor comparável (Repeater, Group, Mensagem) ou do JavaScript do ACF que não carregou na tela. A lógica condicional só controla a exibição no editor, não impede que o valor oculto seja salvo ou exibido no frontend.

Atenção

Como corrigir a incompatibilidade de templates entre Crocoblock e Astra Pro

A incompatibilidade de templates entre Crocoblock e Astra Pro acontece quando o JetThemeCore aplica um Body Template na mesma condicao em que o Astra Pro já monta cabeçalho, título e container, e os dois layouts competem. O resultado e cabeçalho duplicado, título repetido ou o template errado vencendo.

Atenção

Como corrigir o Login Widget do Elementor que redireciona para a página errada no WordPress

O Login Widget do Elementor redireciona para a página errada quando o toggle Redirect After Login está desligado, aponta para uma URL incorreta, ou quando o cache serve uma versão antiga do widget e o WordPress aplica o redirecionamento padrão para o wp-admin.

Grave

Como corrigir o erro de Dynamic Content do ACF PRO no Elementor

O Dynamic Content do ACF no Elementor falha quando o campo não surge na lista de Dynamic Tags ou renderiza vazio no widget. As causas reais são ausência do Elementor PRO, tipo não suportado como Repeater, meta key divergente ou Location Rules fora do template. A correção alinha a fonte ACF Field ou usa Post Custom Field.

Atenção

Como corrigir o Mega Menu que não exibe submenus no Astra Pro

O Mega Menu do Astra Pro deixa de exibir submenus quando o módulo Nav Menu está inativo, quando o toggle Enable Mega Menu não foi ligado no item pai ou quando os itens de submenu não estão aninhados sob o pai em Aparência -> Menus. Sem submenu aninhado, o Astra não monta as colunas e o menu abre vazio.

Setores

Extensões

Integrações

Como corrigir o Sticky Header que não funciona no Safari no Astra Pro

O que é Sticky Header do Astra Pro no Safari?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

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

Como corrigir a Conditional Logic que não funciona no ACF PRO

Como corrigir a incompatibilidade de templates entre Crocoblock e Astra Pro

Como corrigir o Login Widget do Elementor que redireciona para a página errada no WordPress

Como corrigir o erro de Dynamic Content do ACF PRO no Elementor

Como corrigir o Mega Menu que não exibe submenus no Astra 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