Código para resolver problema do espaço reservado do plugin Sticky Header Effects for Elementor

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.