Menu não aparece :/ | Web Design Responsivo: Páginas que se adaptam do mobile ao desk

O script está funcionando porém o css não.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

    <title>Notícias.com</title>

    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/exercicios.css">
</head>
<body>

    <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">Fechar 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>

    <main class="destaques container">

        //códigos não relacionados omitidos

    </main>

    <script src="js/menu.js"></script>
</body>
</html>



@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-principal li {
        padding: 1em 0;
        width: 100%;
    }
}


@media (max-width: 600px) {
    .menu-ativo:after {

console.log("script");

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

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

document.documentElement.onclick = function(event) {
    console.log("html");
    if(event.target === document.documentElement) {
        document.documentElement.classList.remove("menu-ativo");
    }
};

Fala Geovane,

Acho que faltou algum código CSS aí, olhei o código CSS do projeto final e está assim:


@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-principal li {
      padding: 1em 0;
      width: 100%;
  }
  .menu-ativo:after {
        content: "";
        display: block;

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

        background: rgba(0,0,0,0.4);
    }
}

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

Aqui funcionou, teste aí com esse código e vê se funciona!

Espero ter ajudado!

Abraços!