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