Elementor : Sticky Header transparent ou menu transparent

Vous êtes un utilisateur d’Elementor et vous voulez intégré un header transparent ? Nous allons vous décrire dans cet article la marche à suivre pour réaliser la même barre de menu comme sur ce site.

Bien sur il existe des plugins qui vous permettent de faire ce genre de paramètre comme PAFE ou autre, mais ici nous allons nous intéresser à l’intégration via CSS.

Créer un header sticky via elementor

• Créez votre section (logo, menu, réseaux sociaux …)
• Définissez une hauteur fixe (ici 130 px) puis balise html > header
• Ensuite allez dans l’onglet « Avancé » et placez une marge de moins la hauteur fixe vers le bas, de votre section (ici -130px)
• puis nous allons définir une classe CSS (ici sticky-header)

Rétrécissement du logo de votre site au défilement de votre page

Vous devez définir une taille en pixel à votre logo dans l’onglet style, puis lui ajouter une classe (logo par exemple)

Et bien sur avant de commencer à intégrer le css, nous allons définir notre section en sticky. Pour cela, votre section > Avancé > Effets de mouvement > épinglé en haut en lui indiquant un décalage de l’effet.

Voilà, tout est paramétré correctement, maintenant nous allons attaquer la suite pour mettre en place votre header transparent.

CSS personnalisé dans Elementor pour votre menu sticky

Dans l’onglet avancé de votre section, il vous suffit de placer ces quelques lignes css:

  header.sticky-header {
--header-height: 80px;
--opacity: 0.90;
--shrink-me: 0.80;
--sticky-background-color: #000000 ;
--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;

backdrop-filter: blur(10px);
box-shadow: 1px 1px 12px #555;
}
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(80% * var(--shrink-me));
}  

Et le tour est joué, vous avez une en-tête transparente et un logo qui rétrécie au scroll. Ici nous avons indiqué une couleur noir lors du scroll (#000000) et vous pouvez aussi jouer avec la transition, la taille du logo à réduire, la hauteur de section etc etc