Help Nav barre responsive

Bonjour à vous, j'écris sur ce forum car j'ai besoin d'aide pour la responsivité de ma nav barre. En effet, j'ai un projet à rendre où, avec mes camarades, nous devons rendre un site ayant certaines fonctionnalités et qui doit plus ou moins ressembler à Allociné.
Notre site est bientôt terminé mais nous avons comme obligation de le rendre responsive. Le fait est que nous avons eu très TRES peu d'heure sur le responsive (je pense qu'on a même pas une heure à notre actif et cette dernière date d'il y a plusieurs mois). J'en viens alors à mon problème : j'ai essayé tant bien que mal de rendre la barre de navigation que mon camarade a fait responsive, fonctionnant avec un menu hamburger et avec un media query, mais je n'y arrive pas.

J'espère alors que vous pourrez m'aider !

"PHP"
<nav> 
  <ul>
    <li><a href="index.php" class="logo"><img src="include/CinemaChronicles.png" class="logo"></a></li>
      <div class="menu">
      <span class="bar"></span>
    <li><a href="#" class="extrabold">Genres</a>
    <ul class="sous_menu">
      <?php 
      $dbh = new PDO('mysql:host=localhost;dbname=sae203;charset=utf8', 
            'root', 
            '');
            $sth = $dbh->prepare('SELECT idGenre,libelle FROM genre');
            $sth->execute();
            $result = $sth->fetchAll();
            foreach($result as $row){
                echo "<li><a href='genres.php?cat=".$row["idGenre"]."' target=blank>".$row["libelle"]."</a></li>"
            ;}
      ?>
    </ul>
    <li class="menu_deroulant"><a href="nouveau_film.php" class="extrabold">Ajouter un film &ensp;</a>
      <ul class="sous_menu">
        </ul>
        <li><a href="nouveaux.php" target= blank class="extrabold">Nouveaux</a></li>
        <li class="menu_deroulant"><a href="mieux_notes.php" class="extrabold"> Les mieux notés  &ensp;</a>
                    <ul class="sous_menu">
                  </ul>
                  <li> <form action="reponse.php" method="POST" class="recherche">
        <input type="search" placeholder="Rechercher un film..." name="searchbox" id="searchbox">
        <input type="submit" value="⇨" class="recherche"></form></li>
                  </ul>
                </ul>
              </div>
                </nav>

<script>
  var isActive = false;

let menu = document.querySelector('.menu')
menu.addEventListener('click', afficherMenu)
function afficherMenu() {
    if (isActive){
        menu.classList.remove("active")
        document.querySelector('body').classList.remove('menu-open')
    } else {
        menu.classList.add("active")
        document.querySelector('body').classList.add('menu-open')
    }
    isActive = !isActive
}
</script>

"CSS du nav"

  nav{
  background-color: rgb(255, 218, 86);

  }
  img.logo{
    padding: 5px;
    width: 200px; 
  }

  nav ul{
  list-style-type: none;
  padding:10px 100px;
  }

  nav ul li{
  float: left;
  width: 200px;
  text-align: center;
  position: relative;
  }

  nav ul::after{
  content: "";
  display: table;
  clear: both;
  }

  nav a{

  display: block;
  color: rgb(52, 52, 52);
  padding: 20px 0px;
  }
  a.blanc{
    font-size: 19px;
    color: #d57474;
  }

  nav a:hover:not(.logo){
  color: rgb(0, 0, 0);
  border-bottom: 3px solid rgb(70, 70, 70);
  background-color: rgb(255, 241, 147);
  border-radius: 2px;
  }

  .sous_menu{
    z-index: 20000;
  display: none;
  background-color: rgb(255, 241, 147);
  position: absolute;
  width: 100%;
  }

  .sous_menu li{
  width: 100%;
  text-align: left;
  }

  .sous_menu a{
  padding: 10px;
  }

  nav > ul li:hover .sous_menu{
    display: block; 
    padding:0px 0px;
    }
.extrabold {
font-weight:800; 
}
#searchbox {
width: 200px;
padding: 5px;
}
button{
padding: 5px;
width: 35px;  
margin-top: 30px;
}
.menu{
margin-left: 230px;
margin-top: 30px;
}

@media screen and (max-width: 768px){
  .logo{
    display: none;
  }
  .menu{
    display: block;
    position: fixed;
    width: 3rem;
    height: 3rem;
    top: 3rem;
    right: 3rem;
    z-index: 999;
    cursor: pointer;
  }
  .bar,
  .bar::before,
  .bar::after{
    position: absolute;
    background-color: #000;
    margin: auto;
    width: 100%;
    height: 3px;
    content: "";
    top: 50%;
    left: 0;
    transition: all .4s;
  }
  .bar{
    margin-top: -2px;
  }
  .bar::before{
    top: -1.2rem;
  }
  .bar::after{
    top: 1.2rem;
  }
  .bar::before,
  .bar::after{
    transform: rotate(0deg);
  }
  .active .bar{
    background-color: transparent;
  }
  .active .bar::before{
    transform: rotate(45deg);
  }
  .active .bar::after{
    transform: rotate(-45deg);
  }
  .active .bar::before,
  .active .bar::after{
   top: 0;
  }
  nav{
    width: 25rem;
    height: 100%;
    background-color: rgb(255, 255, 94);
    position: fixed;
    transform: translateX(-50rem);
    z-index: 998;
    line-height: 1;
    font-size: 2.5rem;
    transition: transform .6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  }
  .menu-open nav{
    transform: translateX(0);
  }
  nav ul{
    width: 100%;
    text-align: center;
    padding-top: 10rem;
  }
  nav ul li{
    display: block;
    padding: 4rem 1rem;
}
}

Je précise que nous ne sommes pas, mais vraiment pas, en licence informatique ou je ne sais quoi, nous sommes en BUT Métiers du Multimédia et de l'Internet et nous sommes obligés de faire du code. Soyez compréhensif dans l'écriture de ces derniers :)

Merci à vous !

Ce que je veux

Une barre de navigation responsive
Ce que j'obtiens

Une barre de navigation toute bugué, voire qui ne s'affiche même plus