How can I display my list items after clicking an icon?

I coded a dropdown menu for mobile users but it does not work. The website is responsive, so you can see the icon for the dropdown menu at a width of 700px. After clicking the icon, the menu should open and the list items should be displayed in a list on top of each other.

I used JavaScript:

$(document).ready(function() {
  $(".fa-bars").on("click", function() {
    $("header nav ul li").toggleClass("open");
  });
});

HTML:

    <!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <head>
      <meta charset="utf-8">
      <title>Daniel | Website</title>

      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">

      <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
      <script src="../../js/mobile-menu.js"></script>#
      <script src="js/lernen.js"></script>

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


    </head>
  </head>
  <body>

<!-- HEADER ---------------------------------------------------------------------------------------------->

    <header>
      <div id="logo">
        <a href="../home/"><img src="../../img/logo.png" alt="Das Logo wurde nicht gefunden!!"></a>
      </div>

      <nav id="main-nav">
        <i class="fa fa-bars" aria-hidden="true"></i>
        <ul>
          <li><a href="#home"> Lernen </a></li>
      <li><a href="#was"> Was? </a></li>
      <li><a href="#fuer-wen"> Für wen? </a></li>
      <li><a href="#kontakt"> Kontakt </a></li>
      <li><i class="fas fa-users-cog", id="user-cog"></i></li>

        </ul>

      </nav>

    </header>

CSS:

header nav ul li{
    display: none;
  }

header nav ul li.open{
    display: block;
    float: none;
    padding-top: 10px;
    padding-bottom: 10px;
  }

Solution

When I copy and paste your own code into the editor here, it works. There were a few things about the markup I had to clean up (the <head> tag has been duplicated, the body and html tag needed to be closed), but that makes me think that the issue is probably not the Javascript or CSS.

As an unrelated aside, you might consider showing and hiding the ul instead of all the lis. Same effect, but fewer things to select and toggle.

$(document).ready(function() {
  $(".fa-bars").on("click", function() {
    $("header nav ul li").toggleClass("open");
  });
});

header nav ul li{
    display: none;
  }

header nav ul li.open{
    display: block;
    float: none;
    padding-top: 10px;
    padding-bottom: 10px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


    <header>
      <div id="logo">
        <a href="../home/"><img src="../../img/logo.png" alt="Das Logo wurde nicht gefunden!!"></a>
      </div>

      <nav id="main-nav">
        <i class="fa fa-bars" aria-hidden="true">|||</i>
        <ul>
          <li><a href="#home"> Lernen </a></li>
      <li><a href="#was"> Was? </a></li>
      <li><a href="#fuer-wen"> Für wen? </a></li>
      <li><a href="#kontakt"> Kontakt </a></li>
      <li><i class="fas fa-users-cog", id="user-cog"></i></li>

        </ul>

      </nav>

    </header>