Elementor : Sticky Header transparent ou menu transparent

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

Picture of Olivier Routhier
Olivier Routhier

Olivier est un rédacteur, éditeur et spécialiste du contenu web. Avant de rejoindre Effet Papillon, il a passé des années à perfectionner ses compétences au sein de plusieurs agences web en France, Belgique et Luxembourg..

Voir les articles d'Olivier

Besoin d'une Agence de Communication et Web ?

Contactez-nous

Nos derniers articles
Wordpress

Wordpress
accélérer Wordpress en suivant notre tuto et les bonnes pratiques
Explorez les meilleures pratiques pour accélérer votre site WordPress. De l'optimisation des images à la sélection des plugins, ce guide complet vous offre des conseils...
Snippet, Wordpress
Pour supprimer le zoom sur de l’image de produit WooCommerce, ajoutez le code suivant à votre functions.php sur votre thème enfant ou « child theme ».  ...
Snippet, Wordpress
WooCommerce enveloppe automatiquement l’image principale de votre produit dans une balise <a> . Il est soit lié à la lightbox, soit si vous avez désactivé...