Elementor – Changer la couleur de son header au scroll

Appliquer des effets au scroll à votre header via Elementor sans plugin ni JavaScript.
Lire la vidéo

Aucun plugin, seulement Elementor

De nombreux tutoriels présents sur le web propose des solutions complexes pour changer de couleur votre header ou autres éléments présents dans celui-ci.

 

Dans ce tutoriel vous n’utiliserez aucun plugin – hormis Elementor – et uniquement du CSS. Le JavaScript, nous n’en avons pas besoin non plus !

CSS – Exemple de code

Ci-dessous vous trouverez le CSS utilisé dans le tutoriel. A savoir que des ajustements sont nécessaires en fonction des widgets utilisés et de vos propres besoins.

1. Header – Arrière-plan et transition

				
					/* Changer la couleur d'arrière plan */
.elementor-sticky--effects {
   background: #fff!important;
   border-bottom: 1px solid #e0e0e0; 
}

/* Transition - Changer "600ms" pour définir une nouvelle durée */
.elementor-sticky--effects, .sticky-menu-items ul li a .logo-noir {
  transition: 600ms all ease-in-out;
}
				
			

2. Menu – Elementor

				
					.elementor-sticky--effects .sticky-menu-items ul li a {
   color: #001d29!important;
}

.elementor-sticky--effects .elementor-item:after {
    background-color: #001d29!important;
}


/* Mobile et tablette uniquement */
@media screen and (max-width:1024px) {
.elementor-sticky--effects .elementor-menu-toggle {
    background-color: white!important;
}

.elementor-sticky--effects .elementor-menu-toggle svg {
    fill: #001d29!important;
}

.elementor-sticky--effects i.elementor-menu-toggle__icon--close.eicon-close {
    color: #001d29!important;
}
}
				
			

3. Logo – Swipe au scroll

Logo 1

				
					/* Adapter la classe .logo-white */
.elementor-sticky--effects .logo-white {
    display: none;
}
				
			

Logo 2

				
					/* Adapter la classe .logo-noir */
.logo-noir {
    display: none;
}

/* Adapter la classe .logo-noir */
.elementor-sticky--effects .logo-noir {
    display: inline-block;
}
				
			

4. Call To Action – CTA

				
					.elementor-sticky--effects .elementor-button-link {
   background-color: #08352F!important;
   color: #ffffff!important;
}
				
			

Résumé

Vous savez à présent comment changer – sans plugin ni JavaScript – la couleur de votre header et de tout élément interne via Elementor.

Articles similaires