Não sei te dizer se existe uma maneira mais simples de fazer isso, mas essa que vou mostrar é bem rápida e nas configurações do layout de tema ele não dá opção para essa configuração que deseja fazer, então creio que vai ter que ser “na marra” mesmo:
1 - Configure seu cabeçalho para ficar fixo no site. Vá em Beaver Builder ➡️ Layout de tema e escolha seu cabeçalho e clique em editar (o editar padrão mesmo e não o de editar com Beaver Builder); depois ative a opção fixo conforme a print.
2 - Agora vá em Aparência ➡️ Personalizar ➡️ CSS Adicional e cole o seguinte código:
/* Quando o cabeçalho não está fixo (inicial) */
.fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-sticky) {
opacity: 0;
transition: opacity 500ms ease-in-out;
}
/* Quando o cabeçalho se torna fixo ao rolar */
header.fl-builder-content.fl-theme-builder-header-sticky.fl-theme-builder-header-scrolled {
opacity: 1;
transition: opacity 500ms ease-in-out;
}
Esse código irá esconder o cabeçalho inicialmente e ao rolar ele irá aparecer com uma leve transição de fade-in.
