On peut être partisan ou non des entêtes fixes, appelés aussi sticky header, il faut leur reconnaitre une utilité dans l’ergonomie générale d’un site Internet. Un sticky header permet d’accéder à n’importe quel moment au logo et au menu principal. Cependant, pour que cela ne soit pas un frein à l’expérience de navigation, il convient de pouvoir diminuer la hauteur de l’entête lorsque l’utilisateur commence à scroller dans la page.
Pré-requis
Pour continuer, assurez-vous d’avoir une licence Elementor Pro car il sera nécessaire d’accéder aux modèles Elementor de type Entête (Header).
Configuration des élements
Configuration de la section
Nous partons du principe que vous avez déjà créé votre entête. Modifiez-le dans Elementor.
Cliquez sur la section où vous avez créé les éléments d’entête, puis rendez-vous dans l’onglet Mise en page.
Assurez-vous d’indiquez les valeurs suivantes.
Allez ensuite dans l’onglet Avancé.
Si vous aviez des margin ou padding personnalisés, laissez les valeurs vides par défaut. Puis dans le champs Classe CSS, saisissez sticky-header.
Dépliez le bloc Effets de mouvement, et pour activer le sticky il faut choisir une position. Dans notre cas, c’est la valeur Top qu’il faut sélectionner.
Assurez-vous ensuite de n’activer le sticky que lorsque vous êtes en version desktop. Pour cela, retirez les Tablette et Mobile du champ Sticky on.
Configuration du logo
Cliquez sur l’image qui vous sert de logo (1) et allez dans l’onglet Avancé. Puis dans le champs Classe CSS, saisissez shrinking-logo.
Ajouter le code CSS personnalisé
Cliquez sur le menu burger tout en haut à gauche de l’interface Elementor, puis choisissez Réglages du site. Dans réglages, sélectionnez CSS Personnalisé et collez le code suivant :
header.sticky-header {
--header-height: 120px;
--opacity: 1;
--shrink-me: .5;
--sticky-background-color: #2f3844;
--transition: 1s ease;
--transition-logo: .4s ease;
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);
}
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 .shrinking-logo img {
transition: max-width var(--transition-logo);
}
header.sticky-header.elementor-sticky--effects .shrinking-logo img {
max-width: calc(100% * var(--shrink-me));
padding: 10px;
/*width: 56px !important;*/
}
Et voilà, vous pouvez voir le résultat dans la sandbox : Exemple d’entête fixe et qui rétrécit au scroll avec Elementor.
Pour aller plus loin.
Ce tutoriel s’inspire très fortement de la documentation Elementor : How to Create a Shrinking Sticky Header with Elementor et de l’article de Kinsta : Le guide ultime des entêtes Elementor épinglés.
