Problema em visualizar os botões

Ao utilizar as propriedades citadas no exemplo não consigo mais visualizar os botões.

CSS
@media (max-width: 600px) {
    .barra-nav {
        background: #f0f0f0;
        padding: 1em;
        margin: 0;

        height: 100%;
        width: 90%;
        max-width: 320px;

        position: fixed;
        z-index: 1;
        top: 0;
        left: -90%;

        transition: left .3s ease-out;
    }

    .menu-ativo .barra-nav {
        left: 0;
    }

    .menu-principal li {
        padding: 1em 0;
        width: 100%;
    }

    .menu-ativo:after {
        content: "";
        display: block;

        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        background: rgba(0, 0, 0, .4);
    }
}

@media not all and (max-width: 600px) {
    .menu-abrir,
    .menu-fechar {
        display: none;
    }
}

JS

document.querySelector('.menu-abrir').onclick = function() {
    document.documentElement.classList.add('menu-ativo');
};

document.querySelector('.menu-fechar').onclick = function() {
    document.documentElement.classList.remove('menu-ativo');
};

document.documentElement.onclick = function(event) {
    if(event.target === document.documentElement) {
        document.documentElement.classList.remove('menu-ativo');
    }
};