Fazendo um site de uma cliente com Elementor, o logotipo tinha detalhes pequenos e precisava aparecer grande no cabeçalho para ficar legível, mas queria que ele diminuísse no scrool down para não ocupar tanto espaço. Achei um tutorial em: https://www.wppagebuilders.com/create-shrinking-header-elementor/.
Iniciando, é preciso estabelecer a altura mínima do cabeçalho e definir a tag html como header (aba Layout). Depois, na aba Avançado, deve-se atribuir a classe sticky-header. Ainda na aba Avançado abrir as opções Motion Effects e definir a opção Sticky para Top. É necessário desabilitar as opções tablet e celular no campo Sticky O. Definir Effects Offset para a mesma altura do cabeçalho estabelecida na aba Layout. No módulo do logo, atribuir a classe logo .
Agora é preciso colocar o código CSS abaixo nas configurações da página:
header.sticky-header {
--header-height: 133px;
--opacity: 0.90;
--shrink-me: 0.50;
--shrink-logo: 0.45;
--sticky-background-color: #1CBBAF;
--transition: .3s ease-in-out;
transition: background-color var(--transition),
background-image var(--transition),
backdrop-filter var(--transition),
opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
background-color: var(--sticky-background-color) !important;
background-image: none !important;
opacity: var(--opacity) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding-bottom: 13px!important;
padding-top: 13px!important;
}
header.sticky-header > .elementor-container {
transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc(var(--header-height) * var(--shrink-me))!important;
height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
padding-bottom: 10px!important;
padding-top: 10px!important;
}
header.sticky-header > .elementor-container .logo img {
transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
max-width: calc(100% * var(--shrink-logo));
}
Pode-se ver o efeito na imagem acima.
