_prototype-header
header info
<header class="o-prototype-header">
<div class="o-prototype-header__top">
<div class="l-container l-container--l">
<a class="a-link o-prototype-header__link" href="#">
<span class="a-link__text">Contact & hulp</span>
</a>
<div class="a-input a-input--no-label a-input--search o-prototype-header__search">
<label class="a-input__label">zoeken</label>
<div class="a-input__holder">
<input class="a-input__value" type="search" placeholder="zoeken"/>
</div>
</div>
<div class="m-dropdown ">
<div class="m-dropdown__trigger">
<span class="a-count a-count--reversed">
<span class="a-count__value">1</span>
<span class="a-count__icon icon-shopping-cart">
</span>
</span>
</div>
<div class="m-dropdown__content">
content goes here
</div>
</div>
<div class="m-dropdown ">
<div class="m-dropdown__trigger">
<span class="a-count a-count--reversed">
<span class="a-count__icon icon-profile">
</span>
</span>
</div>
<div class="m-dropdown__content">
content goes here
</div>
</div>
</div>
</div>
<div class="l-container">
<div class="o-prototype-header__main">
<a href="#" class="a-logo o-prototype-header__logo">
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 670.327 152.614" style="enable-background:new 0 0 670.327 152.614;" xml:space="preserve">
<g class="a-logo__text">
<path style="fill:#00A0DC;" d="M196.439,97.789c-16.844,0-16.024-15.821-16.024-15.821c2.683,2.497,9.549,5.087,15.467,5.087
c6.112,0,9.069-1.748,9.069-5.461c0-2.866-1.756-4.25-10.361-5.457c-10.552-1.482-15.642-5.654-15.642-13.233
c0-9.348,8.422-17.303,21.191-17.303c15.596,0.229,15.704,15.626,15.704,15.626c-2.591-2.586-8.573-4.893-14.5-4.893
c-7.587,0-9.993,2.318-9.993,5.555c0,2.497,1.481,3.512,9.993,4.905c10.365,1.66,15.919,6.192,15.919,14.155
C217.262,91.5,209.859,97.789,196.439,97.789z"/>
<path style="fill:#00A0DC;" d="M326.93,97.516h-2.502c-11.844,0-19.984-6.662-19.984-15.832c0-8.873,6.477-15.63,24.798-15.63
h4.347v-0.652c0-7.03-3.334-9.164-10.734-9.164c-8.976,0-13.972,3.431-15.825,5.741c0,0,0.697-16.259,17.677-16.193
c11.104,0,21.099,5.185,21.099,22.386v11.482C345.807,90.204,338.036,97.516,326.93,97.516z M333.684,74.928h-4.442
c-9.437,0-12.12,2.23-12.12,6.299c0,3.886,3.14,6.197,8.605,6.197c5.367,0,7.957-2.591,7.957-7.681V74.928z"/>
<path style="fill:#00A0DC;" d="M405.434,31.146v15.557h15.004c0,0,0.243,11.025-12.342,11.025h-2.662V77.24
c0,6.489,2.867,8.978,7.86,8.978c3.986,0,7.037-0.548,8.978-1.755c0,0-1.017,12.219-11.293,12.219
c-12.589,0-17.856-7.221-17.856-17.953c0-10.731,0-30.967,0-30.967C393.123,33.937,405.434,31.146,405.434,31.146z"/>
<path style="fill:#20344B;" d="M558.086,45.601c14.998,0,23.602,12.03,23.602,25.267c0,14.987-8.603,26.921-24.712,26.921
c-14.986,0-23.596-11.934-23.596-25.172C533.38,57.631,541.989,45.601,558.086,45.601z M556.976,56.705
c-7.12,0-10.737,5.926-10.737,14.163c0,9.89,3.617,15.816,11.848,15.816c7.227,0,10.736-5.926,10.736-14.066
C568.822,62.631,565.117,56.705,556.976,56.705z"/>
<path style="fill:#20344B;" d="M646.729,45.601c14.989,0,23.598,12.03,23.598,25.267c0,14.987-8.608,26.921-24.705,26.921
c-14.998,0-23.603-11.934-23.603-25.172C622.019,57.631,630.624,45.601,646.729,45.601z M645.622,56.705
c-7.127,0-10.737,5.926-10.737,14.163c0,9.89,3.61,15.816,11.845,15.816c7.218,0,10.735-5.926,10.735-14.066
C657.465,62.631,653.761,56.705,645.622,56.705z"/>
<g>
<path style="fill:#00A0DC;" d="M371.932,46.329c-11.607,0.969-16.317,10.002-16.317,19.45v24.559v0.125
c0,3.436,2.79,6.219,6.246,6.219c3.451,0,6.243-2.783,6.243-6.219c0-0.01,0.009-22.466,0.009-22.466
c0-7.594,3.05-11.296,8.607-11.296c4.647,0.005,9.652,2.13,9.652,2.13S385.785,45.398,371.932,46.329z"/>
</g>
<g>
<path style="fill:#00A0DC;" d="M295.961,66.701c0-14.161-9.251-21.1-20.728-21.1c-6.011,0-11.473,3.147-14.346,7.769
c-3.607-4.813-8.696-7.769-15.174-7.769c-15.081,0-22.204,9.066-22.204,22.676v22.103c-0.001,0.049-0.007,0.096-0.007,0.145
c0,3.399,2.758,6.153,6.157,6.153c3.267,0,5.954-2.547,6.154-5.766l0,0V66.373c0-5.971,3.607-9.766,8.422-9.766
c5.46,0,9.253,3.521,9.253,11.758V89.91c0,0.076-0.001,0.457-0.001,0.582c0,3.428,2.777,6.204,6.206,6.204
c3.428,0,6.195-2.776,6.195-6.204l-0.001-0.187V66.973c0-6.844,3.423-10.365,8.416-10.365c5.462,0,9.164,3.521,9.164,11.758
v21.875l0,0.465c0.159,3.325,2.899,5.976,6.225,5.976c3.41,0,6.236-2.744,6.268-6.187v-0.063V66.701z"/>
</g>
<g>
<path style="fill:#20344B;" d="M453.796,45.601c-17.579,0-24.991,11.482-24.991,28.039v35.425c0,0-0.002,0.061-0.001,0.092
c0.075,3.385,2.856,6.103,6.276,6.103c3.463,0,6.317-2.776,6.317-6.226c0-0.066-0.005-0.237-0.005-0.237s0-10.481,0-17.43
c2.498,4.263,7.038,6.423,12.586,6.423c14.53,0,22.492-11.572,22.492-27.572C476.471,57.631,467.025,45.601,453.796,45.601z
M453.52,86.774c-7.407,0-12.306-5.638-12.306-15.631c0-8.607,3.786-14.535,10.641-14.535c7.956,0,11.844,5.091,11.844,16.847
C463.699,81.412,459.536,86.774,453.52,86.774z"/>
</g>
<g>
<path style="fill:#20344B;" d="M527.137,67.439c0-14.158-7.596-21.838-20.451-21.838c-4.72,0-8.976,2.066-10.827,5.014v-3.072
c0-15.632-12.684-16.171-12.684-16.171v58.952c0,0.01,0,0.137,0,0.193c0,3.46,2.81,6.261,6.287,6.261
c3.388,0,6.167-2.667,6.302-6.009c0.013-0.005,0-22.403,0-22.403c0-8.801,5.087-11.758,8.978-11.758
c5.458,0,9.897,3.246,9.897,11.389v22.146c0,0,0,0.244,0,0.369c0,3.408,2.78,6.17,6.231,6.17c3.361,0,6.128-2.622,6.268-5.909
C527.153,90.765,527.137,67.439,527.137,67.439z"/>
</g>
<path style="fill:#20344B;" d="M601.799,31.487v15.558h15.004c0,0,0.242,11.025-12.342,11.025h-2.662V77.58
c0,6.489,2.867,8.978,7.86,8.978c3.986,0,7.036-0.548,8.977-1.754c0,0-1.016,12.219-11.292,12.219
c-12.589,0-17.856-7.222-17.856-17.954c0-10.731,0-30.967,0-30.967C589.488,34.278,601.799,31.487,601.799,31.487z"/>
</g>
<g class="a-logo__symbol">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="77.1691" y1="77.2502" x2="216.1688" y2="229.2498">
<stop offset="0" style="stop-color:#00A0DC"/>
<stop offset="1" style="stop-color:#20344B"/>
</linearGradient>
<path style="fill:url(#SVGID_1_);" d="M80.363,152.504c42.077-2.24,74.374-38.178,72.14-80.251
c-2.244-42.083-38.166-74.374-80.26-72.144C30.173,2.353-2.126,38.283,0.109,80.361C2.354,122.446,38.284,154.74,80.363,152.504z
M33.528,78.589c-1.254-23.62,16.877-43.804,40.508-45.052c12.215-0.654,31.898,2.586,51.443-8.107
c-10.609,12.23-7.002,37.196-6.395,48.601c1.252,23.619-16.877,43.795-40.508,45.049C54.96,120.34,34.788,102.208,33.528,78.589z
M91.573,76.221c0.001-8.438-6.828-15.274-15.256-15.278c-8.443-0.008-15.285,6.826-15.277,15.265
c-0.016,8.423,6.827,15.267,15.252,15.273C84.736,91.49,91.565,84.652,91.573,76.221z"/>
</g>
</svg>
</a>
<nav class="o-prototype-main-nav ">
<a href="#" class="o-prototype-main-nav__toggle js-toggle-menu"><span>toggle menu</span></a>
<ul class="o-prototype-main-nav__menu">
<li class="o-prototype-main-nav__item o-prototype-main-nav__item--has-sub ">
<a href="#">Producten</a>
</li>
<li class="o-prototype-main-nav__item ">
<a href="#">Solden</a>
</li>
<li class="o-prototype-main-nav__item ">
<a href="#">Gloednieuw</a>
</li>
<li class="o-prototype-main-nav__item ">
<a href="#">Speciale momenten</a>
</li>
</ul>
</nav>
<script>
window.addEventListener("load", (() => {
/**************** VARIABLES ****************/
const toggle = document.getElementsByClassName("js-toggle-menu");
const nav = document.getElementsByClassName("o-prototype-main-nav");
/****************** INIT *******************/
const init = () => {
clickHandler();
}
/************** CLICK HANDLER **************/
const clickHandler = () => {
for(let i = 0; i < toggle.length; i++) {
toggle[i].addEventListener("click", (e) => {
e.preventDefault();
nav[i].classList.toggle("is-open");
});
}
};
/****************** START ******************/
init();
}));
</script>
<!---->
</div>
</div>
</header>