Een transparante sticky header met special effects maken in Elementor Pro

Home » Kennisbank » Elementor Pro » Theme builder » Een transparante sticky header met special effects maken in Elementor Pro

Bijlagen (2)

Het allermooiste vind ik zelf is een transparante header die vervolgens van kleur en formaat veranderd op het moment dat je begint met scrollen. (live voorbeeld: websitetoday.nl)

In deze training laat ik je precies zien hoe je dat voor elkaar krijgt. Als je de stappen stap, voor stap volgt dan moet het jou zeker gaan lukken! Let goed op dat je de CSS code aanpast naar je eigen website URL. Mocht je er niet uitkomen, neem vooral even contact met ons op, of stel je vraag in onze community!

Bekijk hier de uitleg op Elementor.com (Engels)
Download via onze bijlage het sticky, transparant shrinking header .json bestand
Download hier de CSS code die je nodig hebt

Gebruik deze CSS code:

header.sticky-header {    
--header-height: 90px;    
--opacity: 0.90;    
--shrink-me: 0.80;    
--sticky-background-color: #FFFFFF;    
--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;    
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 .logo img {    transition: max-width var(--transition); 
}
header.sticky-header.elementor-sticky--effects .logo img {    
max-width: calc(100% * var(--shrink-me)); 
} 

/* Verander logo na scroll vervang URL naar eigen URL logo */ 
header.sticky-header.elementor-sticky--effects .logo img { 
content:url('https://www.visitcapetown.nl/wp-content/uploads/2021/06/Logo-Visit-Cape-Town.png'); 
} 

/* Kleur tekst in navigatie menu Sticky */ 
header.sticky-header.elementor-sticky--effects .header-menu a {    
color: #21694D !important; 
}
header.sticky-header.elementor-sticky--effects .header-menu a:hover {    
color: #6EAA92 !important; 
} 

/* Rand kleur onderkant border */ 
header.sticky-header.elementor-sticky--effects {     
border-bottom-style:solid;     
border-bottom-width:3px;     
border-bottom-color:#21694D; 
}

16 augustus

1 interessant

Rick Memelink

Rick is eigenaar van Websitetoday.nl. Hij ontwikkelt WordPress websites met Elementor en heeft een achtergrond als sportleraar. De afgelopen jaren heeft hij veel cursussen en trainingen gevolgd in online marketing, webdesign en ondernemen. De vreemde combinatie van sport, lesgeven en webdesign maakt dat Rick een bijzondere 'kijk' heeft ontwikkeld op het realiseren van een nieuwe websites voor jou!

Rick Memelink

WordPress Webhosting

Nieuw supersnelle webhosting met NVMe servers i.c.m. LiteSpeed techniek.

Jouw website tot wel 7x sneller dan nu!

Lees meer

7x sneller