Media Queries and JS responsive navbar not fonctionnig-CodePudding

Got 2 problems with my index.html page and I will be thankfull to every person who will help me get rid of it. So, first my responsive nav doesn't work even if the js link is correctly written.
And, my media queries does not have any effect, I want to hide the aside for ipad and mobile users. THANK YOU

let toggle = document.querySelector('.toggle');
let body = document.querySelector('body');

toggle.addEventListener('click', function() {
    body.classList.toggle('body');
});

body {
    background-color: #C6EFE9;
}

.banner {
  width: 100%;
  background-image: url(../img/banner.jpg);
  background-repeat: no-repeat;
  margin-top: 75px;
  height: 350px;
  background-position: center;
  background-attachment: scroll;
}

aside{
    max-width: 50%;
    float: right;
  height: auto;
  margin-right: 50%;
  text-align: center;
  margin: 50px;
  padding: 50px;
  font: serif;
}

aside li {
  list-style: none;
  text-align: left;
}


.apercus {
    position: relative;
    background-color: rgba(255, 255, 255, 0.5);
    max-width: 50%;
  height: 250px;
  margin: 50px;
  border: 2px solid rgba(81, 136, 151, 1);
  cursor: pointer;
  transform: translate3d(10%);
  box-shadow: 10px 5px 5px rgba(37, 132, 139, 0.5);
  border-radius: 10px;
}

img {
  max-width: 50%;
  height: 250px;
  float: left;
  padding-right: 20px;
  border-radius: 10px;
}


.texte {
    padding: 20px;
    font-family: 'Sacramento', cursive;
}

.lien {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 10;
}
.lien a {
    display: block;

}

@media all and (max-width: 600){
  aside {
    display: none;
  }

  .apercus {
    position: relative;
    background-color: rgba(255, 255, 255, 0.5);
    max-width: 100px;
    height: 200px;
    margin: 50px;
    border: 2px solid rgba(81, 136, 151, 1);
    cursor: pointer;
    transform: translate3d(10%);
    box-shadow: 10px 5px 5px rgba(37, 132, 139, 0.5);
    border-radius: 10px;
}
}

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Page d'accueil</title>   
    <!------------------------------COMPATIBILITIES------------------------------>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!---------------------------------FONTS-------------------------------------->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Sacramento&display=swap" rel="stylesheet">

    <!---------------------------------------ICONS------------------------------->
    <script src="https://kit.fontawesome.com/2942c11df3.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="css/header.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    
</head>

<body>
    <header>
        <nav>
            <a href="#" id="logo"><i ></i> Lilaby</a>
            <div >
                <i ></i>
                <i ></i>
            </div>
            <ul >
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Quizs</a></li>
                <li><a href="#">Outils</a></li>
                <li><a href="#">Contacts</a></li>
                <li><button >Connexion</button></li>
            </ul>
        </nav>
    </header>
    <div ></div>

    <aside>
      <h2>FAQ</h2>
      <ul>
            <li><a href="#">Lilaby c'est quoi ? </a></li>
            <br>
            <li><a href="#">Comment prendre RDV ?</a></li>
            <br>
            <li><a href="#">Pourquoi nous ? </a></li>
            <br>
            <li><a href="#">Actulités</a></li>
            <br>
            <li><a href="#">Prochains événements</a></li>
      </ul>
    </aside>
        
    <div >
        <div >
            <a href="#"></a>
        </div>
        <div >
            <img src="img/article.jpg" alt="Image de l'article 1">
        </div>
        <div >
            <h2>Un titre</h2>
            <p>Un paragraphe</p>
        </div>
    </div>

    <div >
        <div >
        <a href="Mon_site/pageFormulaire.html"></a>
        </div>
        <div >
            <img src="img/quiz.jpg" alt="Image de l'article 1">
        </div>
        <div >
            <h2>Un titre</h2>
            <p>Un paragraphe</p>
        </div>
    </div>

    <div >
        <div >
            <a href="#"></a>
        </div>
        <div >
            <img src="img/outils.jpg" alt="Image de l'article 1">
        </div>
        <div >
            <h2>Un titre</h2>
            <p>Un paragraphe</p>
        </div>
    </div>
    
</body>
    <script type="text/javascript" href="js/header.js"></script> 
</html>

CodePudding user response：

Your forget px on @media all and (max-width: 600), @media all and (max-width: 600px`)
<script> tag place is wrong.

Correct Place:
<script src="js/header.js"></script>
</body>
</html>

CodePudding user response：

Add px on media query. You are toggling "body" class in js but you don't have ".body" class in css you're using body tag.