javascript - I want my navigation bar overlapping the content when click the toggle on mobile size

Question

I want my navigation bar overlapping the content when click the toggle on mobile size. I don't want my content scroll down when expand navbar The following is the html and css code and js script of my site how to code it

$(function() {

  $(".toggle").on("click", function() {

    if ($(".item").hasClass("active")) {
      $(".item").removeClass("active");
      $(this).find("a").html("<i class='fas fa-bars'></i>");
    } else {
      $(".item").addClass("active");
      $(this).find("a").html("<i class='fas fa-times'></i>");
    }

  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#body {
  margin-left: 10%;
  margin-right: 10%;
}


/* nav */

nav {
  padding-bottom: 30px;
  padding-top: 85px;
}

ul {
  list-style-type: none;
}

ul.menu {
  padding-left: 0;
  margin-bottom: 0;
}

li a {
  text-decoration: none;
  color: #1D1D1D;
  padding-left: 1rem;
}

.menu li {
  white-space: nowrap;
}

.toggle a {
  font-size: 25px;
}


/* mobile menu*/

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.toggle {
  order: 1;
}

.item {
  width: 100%;
  text-align: right;
  order: 2;
  display: none;
}

.item.active {
  display: block;
}


/* table */

@media all and (min-width: 600px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 1;
  }
  .toggle {
    flex: 1;
    text-align: right;
  }
}


/* desktop */

@media all and (min-width: 900px) {
  .item {
    display: block;
    width: auto;
  }
  .toggle {
    display: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<div id="body">

  <!--navbar-->
  <nav>
    <ul class="menu ">
      <li class="logo"><img src="...jpg" width="100" height="100" alt="" /></li>
      <li class="item active"><a href="motion-graphics.html">Motion Graphics</a></li>
      <li class="item active"><a href="advertising.html">Advertising</a></li>
      <li class="item active"><a href="animation-banner.html">Animation banner</a></li>
      <li class="item active"><a href="others.html">Others</a></li>
      <li class="item active"><a href="about.html">About</a></li>
      <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
    </ul>
  </nav>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="script.js"></script>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an </p>
</div>

question from:https://stackoverflow.com/questions/65950528/i-want-my-navigation-bar-overlapping-the-content-when-click-the-toggle-on-mobile

Answer 1

Here is your fixed code HTML

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
    <div id="body">
    <!--navbar-->
    <nav>
     <ul class="menu">
       <li class="logo"><img src="...jpg" width="100" height="100" alt="" /></li>
       <li class="item"><a href="motion-graphics.html">Motion Graphics</a></li>
       <li class="item"><a href="advertising.html">Advertising</a></li>
       <li class="item"><a href="animation-banner.html">Animation banner</a></li>
       <li class="item"><a href="others.html">Others</a></li>
       <li class="item"><a href="about.html">About</a></li>
       <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
     </ul>
   </nav>

   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script src="script.js"></script>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
     when an 
    </p>
   </div>

CSS

    * {

  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#body {
  margin-left: 10%;
  margin-right: 10%;
}


/* nav */

nav {
  padding-top: 10px;
  position: relative;
  width: 100%;
  height: 150px;
}

ul {
  list-style-type: none;
}

ul.menu {
  padding-left: 0;
  margin-bottom: 0;
}

li a {
  text-decoration: none;
  color: #1D1D1D;
  padding-left: 1rem;
}

.menu li {
  white-space: nowrap;
}

.toggle a {
  font-size: 25px;
}


/* mobile menu*/

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 2;
}

.toggle {
  order: 1;
}

.item {
  width: 100%;
  text-align: right;
  order: 2;
  display: none;
}

.item.active {
  display: block;
}


/* table */

@media all and (min-width: 600px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 1;
  }
  .toggle {
    flex: 1;
    text-align: right;
  }
}


/* desktop */

@media all and (min-width: 900px) {
  .item {
    display: block;
    width: auto;
  }
  .toggle {
    display: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
  }
}