post
Código para resolver problema do espaço reservado do plugin Sticky Header Effects for Elementor
Publicado em: 03/10/2022
Caso queira fixar o header (cabeçalho) do seu site, o plugin Sticky Header Effects for Elementor pode lhe ajudar.
Este plugin é o que mais uso para websites desenvolvidos com Elementor, porem, ele tem um probleminha que acaba sendo um pouco irritante.
O problema
O problema é que ele não fixa o espaço do cabeçalho, o famoso “placeholder” ou “espaço reservado”, isso prejudica na hora de rolar a tela, o conteúdo do cabeçalho dai do lugar onde estava e é fixado, porem todo conteúdo da pagina “vai para cima” pois não fica nenhum espaço reservado, para o cabeçalho que saiu de lá.
Para resolver isso, ele dizem para você user a seção “Efeitos de movimento” para resolver esse problema:


Como mostra nas imagens acima.
Essa solução, é até mesmo usada no site da empresa que desenvolveu o plugin.
Porem o problema de usar esse recurso, que ele adiciona a largura do componente fixa, assim que carrega a pagina, de um ponto de vista pratico resolve o problema, mas de um ponto de vista responsivo não é das melhores soluções.
Veja como fica o site da empresa do plugin:
Quando eu “aperto” a largura da tela, o cabeçalho não vem junto, fica fora da tela.
Solução:
Felizmente tem uma solução melhor.
Você não precisa mexer na seção “efeitos de movimento”. Basta você aplicar esse pequeno código JS, em todas suas paginas:
jQuery('.elementor-location-header').css( { height: jQuery('.elementor-location-header').height() +'px' } );
Para aplicar esse código, basta ir em “Elementor > Código personalizado”, clica em “adicionar novo”.
Digita qualquer titulo, cola o código como abaixo, e depois publica em todas as paginas.

O que esse código faz?
O código acima, vai calcular o tamanho da altura do container principal do header, que envolve todos os outros componentes, e vai pegar esse valor calculado, e aplicar nesse mesmo container.
Assim, ele mantem a altura do container principal fixa, enquanto o cabeçalho desce junto com a pagina.
Link de compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/1996
ID de Referência: 1996
Sugira uma publicação
Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.