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

A lire aussi  Comment copier et migrer un site WordPress avec Duplicator ?
Image de 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 ?

Nos derniers articles
Wordpress

Wordpress
Capture de l'interface WordPress du plugin Auto Facebook Post pour publier automatiquement sur une page Facebook
Ce guide vous montre comment connecter l’API Facebook à votre site WordPress et publier automatiquement vos articles sur votre page Facebook, sans effort ni code.
Wordpress
Qu’est-ce qu’un slug WordPress ?
Le terme « slug » peut sembler anodin, mais il a son importance pour votre site WordPress. Dans cet article, nous découvrirons ce qu’est un slug 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...

Articles populaires

Actualité du digital
Illustration d'un cerveau numérique représentant l'IA, avec le logo ChatGPT intégré en arrière-plan.
Découvrez Chat gor, l'outil d'OpenAI basé sur l'intelligence artificielle. Fonctionnalités, avantages et utilisation pour la rédaction, le code et la génération de contenu automatisée.
Actualité du digital
Smartphone affichant l'application Google Interprète avec une conversation traduite en temps réel.
Le mode Google Interprète est une fonctionnalité innovante qui permet de traduire des conversations en temps réel via l’Assistant Google, Google Translate et certaines applications...
Actualité du digital
Exemple de matrixes utilisées en mathématiques, technologie et intelligence artificielle
Les matrixes sont essentielles dans les mathématiques, les sciences et la technologie. Découvrez leur définition, leurs applications dans les algorithmes, les arts et bien plus...
Organisation et planification
"Interface de Digiposte, coffre-fort numérique pour la gestion et la sécurité des documents personnels et professionnels.
Digiposte est un coffre-fort numérique qui simplifie la gestion de vos documents en toute sécurité. Bulletins de paie, justificatifs ou démarches administratives : centralisez tout...
Organisation et planification
Interface Zimbra affichant la gestion des emails, calendriers et fichiers pour la collaboration.
Zimbra est une plateforme de messagerie et de collaboration largement utilisée dans le monde. Offrant une gestion intégrée des emails, calendriers, et documents, elle est...
Organisation et planification
Opensi : la solution magique pour booster votre e-commerce et simplifier votre gestion de stock !
Opensi est bien plus qu’un simple outil de gestion commerciale pour le e-commerce. Découvrez comment cette solution révolutionne la gestion des stocks avec des fonctionnalités...
Suivre @Effetpapi