#menu-toggle {
    display: none;
}
.menu {
    z-index:100;
}
.menu-icon {
    display:none;
}

@media (max-width: 768px) {
    header nav {
        background-color:white;
        text-align: center;
        display:block;
    }
    .menu {
        display: none;
        flex-direction: column;
        background-color: #ffffff;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
    }

    .menu li {
        text-align: center;
        padding: 10px 0;
    }

    /* Toon menu als de checkbox is ingeschakeld */
    #menu-toggle:checked + .menu-icon + .menu {
        display: flex;
        margin-top:0;
    }

    .menu-icon {
        display: block;
        font-size:35px;
        height:50px;
    }

    .menu-icon:hover {
        cursor: pointer;
    }
}