5.0 dankzij 28 reviews

Google-logo-225-225.png

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

In dit bericht:

 

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; 
}

1 interessant

Picture of Rick Memelink
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!
WhatsApp openen
1
💬 Heb je een vraag?
App met Rick van Websitetoday
Hallo 👋
Heb je een vraag over Een transparante sticky header met special effects maken in Elementor Pro? Of kan ik je ergens bij helpen?
Wil je een offerte aanvragen of heb je vragen over onze prijzen? Vul aub. dit formulier in en ik help je graag verder!