html {
    overflow-y: visible;
}

/*
Header is relative so z-index: 1 guarantees always displayed on top
*/
header {
    background-color: #3b5998;
    padding: 10px;
    text-decoration: none;
    position: fixed;
    width: 100%;
    z-index: 1;
    -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}

#h1 {
    font-size: 6px;
    color: white;
    float: left;
    position: fixed; /* or absolute */
    left: 50%;
    transform: translate(-50%);
}

/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/
#content {
    background-color: #FFFFFF;
    padding: 52px 10px 10px 10px;
    position: relative;
    width: auto;
    height: 100%;
    -webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
    box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
}

/*
the hamburger button with a little gradient effekt
*/
#hamburger {
    cursor: pointer;
    display: block;
    height: 24px;
    padding: 3px 4px 3px;
    position: relative;
    width: 25px;
    background-repeat: repeat-x repeat-y;
    background-image: url('https://www.mobygo.nl/images/concrete_wall_square.jpg');
    background-size: auto;
}

    /*
The white stripes in the hamburger button
*/
    #hamburger div {
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 2px 2px 2px 2px;
        height: 2px;
        margin-top: 3px;
        width: 90%;
    }

/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    z-index: 5;
}