Menu não funciona

Oi André, acho que você está cometendo um pequeno deslize no seu JS. As vezes você escreve .menu-ativo e as vezes menu-ativo sem o ponto.

No JS para adicionar classes, você não precisa do ponto. Testa novamente e vê se funciona com essa correção?

Abraço =)

Perfeito o Wanderson. Só complementando: no classList é sempre sem o ponto. No querySelector é sempre com o ponto.

Perfeito a correção!

Eu realmente me confundi com querySelector e classList

Agora está tudo esclarecido, muito obrigado aos dois o//

Acontece isso.

HTML

    <header>

        <div class="container">

            <button class="menu-abrir">Abre Menu</button>

            <h1 class="logo">
                <img src="img/logo.png" alt="Notícias.com">
            </h1>

            <nav class="barra-nav">

                <button class="menu-fechar">Fecha Menu</button>

                <ul class="menu-principal">
                    <li><a href="noticias.html" class="noticias">Notícias</a>
                    <li><a href="esportes.html" class="esportes">Esportes</a>
                    <li><a href="famosos.html" class="famosos">Famosos</a>
                </ul>

                <form class="busca">
                    <input type="search" id="campo-busca">
                    <button type="submit">Buscar</button>
                </form>
            </nav>
        </div>
    </header>

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 0.3s ease-out;
    }

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


}

 .menu-ativo:after{
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.4);
    }

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


@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');
    }
}

Oi Rael, tudo bem? Olha, não entendi seu post, se for alguma dúvida, por favor, abre em outro tópico que este aqui já foi solucionado.

Novas dúvidas, novos tópicos! Bons estudos!