HTML recebe a classe menu-ativo mas o menu não é exibido

Quando clico no botão "abre menu", o html recebe a tag menu-ativo, porém, o menu não é exibido.

HTML:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Notícias.com</title>

    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/exercicios.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</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">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>

Caminho do javascript

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

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

@media (max-width: 600px) {
  .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;
  }
}

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

Mergulhe em programação