<header class='org-header'>
<div class="header-container">
<a class='header-logo' href='/' title='Vebego Logo'>
<img src='../../assets/img/logo_vebego.svg' alt='Vebego Logo' />
</a>
<nav class="mol-header-desktop-nav mol-header-desktop-nav--megamenu">
<ul>
<li class="active">
<div class="selector selector-closed">
<span class="selector-wrapper">
<a href="atm-nav-link selector-link" href="#">
<span class="text"> Opdrachtgevers met extra text </span>
</a>
<button>
<i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</span>
<div class="selector-sub mega-menu mega-menu--marketing">
<ul>
<li>
<a href="#">
<i class="atm-icon fal fa-ferris-wheel "></i>
<div>
<p class="atm-heading h6">Mijn villa</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-book "></i>
<div>
<p class="atm-heading h6">Bouwreizen</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-bolt-lightning "></i>
<div>
<p class="atm-heading h6">Partners</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-circle-play "></i>
<div>
<p class="atm-heading h6">Blog</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-ferris-wheel "></i>
<div>
<p class="atm-heading h6">Mijn villa</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-book "></i>
<div>
<p class="atm-heading h6">Bouwreizen</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
</ul>
<div class="marketing-area">
<div>
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<h4 class="atm-heading ">Create more value for your customers with extra services</h4>
<div class="atm-paragraph text-md">We’ve just released a 10 minute podcast about value creation for your customers.</div>
</div>
<a class="atm-button atm-button-primary button-md icon-left ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fal fa-arrow-right "></i>
<span>Listen podcast</span>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</li>
<li class="">
<div class="selector selector-closed">
<span class="selector-wrapper">
<a href="atm-nav-link selector-link" href="#">
<span class="text"> Branches </span>
</a>
<button>
<i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</span>
<div class="selector-sub mega-menu mega-menu--marketing">
<ul>
<li>
<a href="#">
<i class="atm-icon fal fa-ferris-wheel "></i>
<div>
<p class="atm-heading h6">Mijn villa</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-book "></i>
<div>
<p class="atm-heading h6">Bouwreizen</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-bolt-lightning "></i>
<div>
<p class="atm-heading h6">Partners</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-circle-play "></i>
<div>
<p class="atm-heading h6">Blog</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
</ul>
<div class="marketing-area">
<div>
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<h4 class="atm-heading ">Create more value for your customers with extra services</h4>
<div class="atm-paragraph text-md">We’ve just released a 10 minute podcast about value creation for your customers.</div>
</div>
<a class="atm-button atm-button-primary button-md icon-left ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fal fa-arrow-right "></i>
<span>Listen podcast</span>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Over</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Vacatures</a>
</li>
</ul>
</nav>
<nav class='mol-header-utils'>
<div class='mol-identifier selector'>
<div class='selector-label selector-wrapper'>
<span class='text'>Groen</span>
<button> <i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</div>
<div class='selector-sub'>
<ul>
<li class="selector-item selector-item--facility-solutions">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Facility solutions</a>
</li>
<li class="selector-item selector-item--cleaning-services">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Cleaning services</a>
</li>
<li class="selector-item selector-item--zorg">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Zorg</a>
</li>
<li class="selector-item selector-item--landscaping-services">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Landscaping services</a>
</li>
</ul>
</div>
</div>
<div class='mol-language-select selector'>
<div class='selector-label selector-wrapper'>
<span class='text'>NL</span>
<button> <i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</div>
<div class='selector-sub'>
<ul>
<li class="selector-item selector-item--de">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">DE</a>
</li>
<li class="selector-item selector-item--fr">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">FR</a>
</li>
<li class="selector-item selector-item--en">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">EN</a>
</li>
</ul>
</div>
</div>
<div class='utils-search'>
<button class="atm-button atm-button-primary utils-search-toggle button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon far fa-search fa-lg fa-fw"></i>
</span>
</div>
</button>
</div>
<div class="utils-cta">
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
<button class='primary' id="header-nav-open-menu">
<span class='text-closed'>Menu</span>
<span class='text-open'>Sluiten</span>
<span class='icon'></span>
</button>
</nav>
</div>
<div class='org-navigation' id="">
<div class="nav-left">
<div class="selector-wrapper">
<div class='mol-identifier selector'>
<div class='selector-label selector-wrapper'>
<span class='text'>Groen</span>
<button> <i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</div>
<div class='selector-sub'>
<ul>
<li class="selector-item selector-item--facility-solutions">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Facility solutions</a>
</li>
<li class="selector-item selector-item--cleaning-services">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Cleaning services</a>
</li>
<li class="selector-item selector-item--zorg">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Zorg</a>
</li>
<li class="selector-item selector-item--landscaping-services">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">Landscaping services</a>
</li>
</ul>
</div>
</div>
<div class='mol-language-select selector'>
<div class='selector-label selector-wrapper'>
<span class='text'>NL</span>
<button> <i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</div>
<div class='selector-sub'>
<ul>
<li class="selector-item selector-item--de">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">DE</a>
</li>
<li class="selector-item selector-item--fr">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">FR</a>
</li>
<li class="selector-item selector-item--en">
<span>/</span>
<a class="atm-nav-link " href="#" title="" aria-label="" target="">EN</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="mol-header-mobile-nav">
<ul class="-active">
<li class="active">
<div class="atm-nav-link" data-nav-trigger="0">
Opdrachtgevers met extra text
<i class="atm-icon far fa-chevron-right fa-xs "></i>
</div>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Schoonmaak</a>
</li>
<li class="">
<div class="atm-nav-link" data-nav-trigger="2">
Branches
<i class="atm-icon far fa-chevron-right fa-xs "></i>
</div>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Over</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Nieuws uit het niets</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Vacatures</a>
</li>
</ul>
<ul data-nav="0">
<li class="subitems-meta">
<button class='subitems-back'>
<i class='fal fa-chevron-left'></i>
Back
</button>
<span>Opdrachtgevers met extra text</span>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Mijn project</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Bouwreizen</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Partners</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Blog</a>
</li>
</ul>
<ul data-nav="2">
<li class="subitems-meta">
<button class='subitems-back'>
<i class='fal fa-chevron-left'></i>
Back
</button>
<span>Branches</span>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Mijn project</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Bouwreizen</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Partners</a>
</li>
<li><a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Blog</a>
</li>
</ul>
</nav>
<div class='sub-nav'>
<div class="mol-work-cta">
<h2 class="atm-heading ">Wanna work together?</h2>
<h3 class="atm-heading ">let's talk</h3>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Tell us more</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
<ul>
<li>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Careers</a>
</li>
<li>
<a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<header class='org-header'>
<div class="header-container">
<a class='header-logo' href='/' title='{{logoAlt}}'>
<img src='{{path logoSrc}}' alt='{{logoAlt}}' />
</a>
{{render '@header-desktop-nav--megamenu'}}
{{render '@header-utils'}}
</div>
{{render '@navigation'}}
</header>
{
"logoSrc": "/assets/img/logo_vebego.svg",
"logoAlt": "Vebego Logo",
"headerSearch": {
"startOpened": false
},
"mobileNav": {
"startOpened": false
}
}
.vebego-header {
@apply fixed top-0 left-0 right-0 z-[999];
transition: top 0.2s ease-in-out;
&.scrolling-down {
@apply top-[-9rem];
}
&.scrolling-up {
@apply bg-white border border-solid border-b-[#d8d8d8];
.org-header--active .selector.on-bg {
.selector-label {
@apply text-white;
}
}
.selector.on-bg {
.selector-label {
@apply text-black;
}
}
}
}
.org-header {
@apply w-full;
.vebego-container {
@apply hidden lg:flex;
}
.header-container {
@apply px-4 py-6 lg:px-8;
@apply flex justify-between items-center relative z-[99] w-full gap-8;
.breadcrumbs {
@apply hidden lg:flex;
}
}
> svg {
@apply pointer-events-none absolute;
}
#header-logo,
#header-logo-alternate {
img {
@apply h-auto max-w-[8.5rem] xl:max-w-[8.875rem];
}
}
.toggle-wrapper {
@apply flex md:hidden items-center ml-auto mr-4;
margin-top: 27px;
.atm-slash {
@apply mx-4;
}
}
.org-navigation {
@apply hidden;
}
&--active .org-navigation {
@apply grid;
&#org-navigition-test {
.selector {
.selector-label {
@apply text-black;
}
}
}
&#org-navigation-default {
.selector {
.selector-label {
@apply text-black md:text-white;
}
}
}
}
.utils-search {
@apply z-50;
.atm-form-input input {
@apply pt-[13px] focus:outline-none focus:border-0 focus:ring-0;
}
}
&--active {
.header-container {
@apply bg-white md:bg-[transparent];
}
.mol-header-utils {
@apply sm:flex-row justify-end items-end;
.utils-search {
@apply flex z-50;
}
}
}
.selector {
&.selector-active .selector-label {
@apply bg-opacity-0;
}
}
}
$(document).ready(function () {
'use strict';
let prevScrollPos = window.pageYOffset;
var headerDiv = document.querySelector('.vebego-header');
const headerSelectors = document.querySelectorAll(
'.org-header .selector'
);
const logo = document.getElementById('header-logo');
const logoAlternate = document.getElementById('header-logo-alternate');
if (headerDiv) {
function headerScroll() {
let currentScrollPos = window.pageYOffset;
const content = document.createElement('body');
var scrolled = document.scrollingElement.scrollTop;
var position = content.offsetTop;
if (scrolled > position) {
if (!headerDiv.classList.contains('.org-header--active')) {
if (prevScrollPos <= currentScrollPos) {
headerDiv.classList.add('scrolling-down');
headerDiv.classList.remove('scrolling-up');
setTimeout(function () {
if (headerSelectors) {
headerSelectors.forEach((selector) => {
selector.classList.remove(
'selector-active'
);
});
}
if (logoAlternate) {
logo.classList.remove('hidden');
logoAlternate.classList.add('hidden');
}
}, 200);
} else {
headerDiv.classList.remove('scrolling-down');
headerDiv.classList.add('scrolling-up');
}
}
} else if (scrolled < position + 5) {
setTimeout(function () {
headerDiv.classList.remove('scrolling-down');
headerDiv.classList.remove('scrolling-up');
if (logoAlternate) {
logo.classList.add('hidden');
logoAlternate.classList.remove('hidden');
}
}, 200);
}
prevScrollPos = currentScrollPos;
}
$(window).on('scroll', function () {
headerScroll();
});
}
});
No notes defined.