/* ================    een hamburger menu  ==============

voor het zichtbaar meken van een hamburger menu 
plaats onderstaande code in de header.php op de plaats waar het menu zichtbaar moet zijn

===================
<div id="header-menu-bar" onclick="menuOnClick()">
    <div id="header-bar1" class="header-bar"></div>
    <div id="header-bar2" class="header-bar"></div>
    <div id="header-bar3" class="header-bar"></div>
</div>	

===================

Plaats in de header-css.css de volgende code voor een klein scherm

#header-menu-bar {
    visibility: visible;
    ==== plus het plaatsen van het hamburger menu  =====
}


onder de @media

#header-menu-bar {
    visibility: none;
}


*/


/*   begin hamburger menu */

#header-menu-bar {
    width: 35px;
    margin: 25px auto;
    padding-left: 10px;
    cursor: pointer;
    background-color: var(--hamburger-bg);
}

.header-bar {
    height: 5px;
    width: 100%;
    background-color: var(--hamburger-balk);
    display: block;
    border-radius: 5px;
    transition: 0.3s ease;
}

#header-bar1 {
    transform: translateY(-4px);
}

#header-bar3 {
    transform: translateY(4px);
}

.menu-hamburger-change {
    display: block;
}

.menu-hamburger-change .header-bar {
    background-color: var(--hamburger-balk);
}

.menu-hamburger-change #header-bar1 {
    transform: translateY(4px) rotateZ(-45deg);
}

.menu-hamburger-change #header-bar2 {
    opacity: 0;
}

.menu-hamburger-change #header-bar3 {
    transform: translateY(-6px) rotateZ(45deg);
}

/* einde hamburger menu */