Push right menu disables fixed position

Question

I have a push right menu on my test website Test Page everything works fine, Header is fixed. The problem starts when I use the mobile menu, it removes the fixed position on my header. I can't seem to figure out where I need to fix this problem on my code.

Here is my HTML

mixin navigation_content
    ul
        li: a(href="{{site.baseurl}}/index.html") HOME
        li: a(href="#") ABOUT  
        li: a(href="#") CONTACT

.header_navigation_container
    .logo

    .navigation
        +navigation_content

    a#header_navigation_mobile_button(href="#") 

.header_navigation_mobile_container
    #navigation_mobile_id.navigation_mobile_class
        +navigation_content

CSS

.header_navigation_container
position: relative 
//child absolute
margin: 0 -9999rem
height: 70px
//add back section padding value
padding: .25rem 9999rem
background: #bd3316
color: white
font-size: 1.125rem

.navigation 
    position: absolute
    top: 10px
    margin-left: 70px

    ul

        li 
            display: inline
            margin-right: 50px
        a 
            text-decoration: none
            font-family: 'Teko', sans-serif;
            font-size: 20px
            color: #f3f3f3

//==============================Mobile Navigation Start=============================
#header_navigation_mobile_button
    display: none
    position: fixed
    width: 30px
    height: 30px
    top: 25px
    right: 20px
    background:
        image: url(../img/menu_button.svg)
        repeat: no-repeat

.header_navigation_mobile_container
    position: fixed
    display: block
    top: 0px
    right: 0px
    background: #bb2506
    width: 100%
    height: 100%
    transform: translateX(+100%)
    ul
        position: fixed
        margin-left: 0px
        padding-left: 20px
        list-style-type: none
        text-align: left

        li
            margin-bottom: 20px

        a 
            font-family: 'Teko', sans-serif;
            text-decoration: none
            color: white

//==============================Mobile Navigation END=============================

//Small Monitors and Tablets 
@media (min-width: 501px) and (max-width: 800px)
    .header_navigation_container
        position: fixed
        background-color: blue

    .navigation
        display: none

    #header_navigation_mobile_button
        display: block

    .page_container.open
        transform: translateX(-50%)
        transition: all 0.2s ease-in-out

//Mobile Devices
@media (min-width: 50px) and (max-width: 500px)
    .header_navigation_container
        position: fixed

    .navigation
        display: none

    #header_navigation_mobile_button
        display: block

    .page_container.open
        transform: translateX(-50%)
        transition: all 0.2s ease-in-out

JAVASCRIPT

function hasClass(ele, cls) {
    return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}


function init() {
     document.getElementById("header_navigation_mobile_button").addEventListener("click", toggleMenu);
}


function toggleMenu() {
    var ele = document.getElementsByClassName('page_container')[0];
    if (!hasClass(ele, "open")) {
        addClass(ele, "open");
    } else {
        removeClass(ele, "open");
    }
}


document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
        init();
    }
});