Quando se coloca a posição de um elemento como fixa, remove-se o espaço que aquele elemento ocupava. Então quando definimos a seção de um cabeçalho como fixa, o cabeçalho fica por cima do conteúdo da página. Uma solução seria ver qual a altura do cabeçalho e incluí-la no topo de todas as páginas, mas aqui nesse tutorial mostra como fazer isso automaticamente usando jQuery: https://www.elegantthemes.com/blog/divi-resources/how-to-automatically-generate-container-space-for-your-fixed-divi-header-using-jquery.
É necessário definir a classe da seção como header-section-container.
jQuery(function($){
var headerSection = $('.header-section-container');
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
var headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
$(window).resize(function() {
headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
});
});Além disso, tem esse código CSS:
.header-section-container .et_pb_column {
margin-bottom: 0px !important;
}E está pronto!
Atualização em 07/07/2022:
Já faz um tempo que o Divi tem os Scroll Effects, que permite selecionar a posição Stick to Top, eliminando a necessidade deste código.
