Toggle menu on mobile icon not where it needs to be

My Code:


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

.toggle {
     color: white;
}

nav {
  background: #222;
  padding: 0 15px;
  font-family: 'Open Sans';
  font-weight: 600;
  margin-bottom: -10px;
}
nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
     color: rgb(233, 221, 221);
}


.logo {
  font-size: 20px;
  padding: 7.5px 10px 7.5px 0;
}
.item {
  padding: 10px;
}

/* Mobile menu */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.menu li a {
  display: block;
  padding: 15px 5px;
}
.menu li.subitem a {
  padding: 15px;
}
.toggle {
  order: 1;
  font-size: 20px;
}

.item {
  order: 3;
  width: 100%;
  text-align: center;
  display: none;
}
.active .item {
  display: block;
}


/* Tablet menu */
@media all and (min-width: 700px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 1;
  }
 
  .toggle {
    flex: 1;
    order: 2;
  }
}
/* Desktop menu */
@media all and (min-width: 960px) {
  .menu {
    align-items: flex-start;
    flex-wrap: nowrap;
    background: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
  }
  .submenu-active .submenu {
    display: block;
    position: absolute;
    left: 0;
    top: 68px;
    background: #111;
  }
  .toggle {
    display: none;
  }
  .submenu-active {
    border-radius: 0;
  }
}
<nav>
   <ul class="menu">
      <li class="logo"><a href="#">Upright Code</a></li>
      <li class="item"><a href="#">Home</a></li>
      <li class="item"><a href="#">About</a></li>
      <li class="item">
         <a href="#">Plans</a>
      </li>
      <li class="item"><a href="#">Contact</a></li>
      <li class="item"><a href="#">Lessons</a>
      </li>
   </ul>
   <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
   </ul>
</nav>
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");


/* Toggle mobile menu */
function toggleMenu() {
    if (menu.classList.contains("active")) {
        menu.classList.remove("active");
        toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
    } else {
        menu.classList.add("active");
        toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
    }
}



/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
    if (item.querySelector(".submenu")) {
        item.addEventListener("click", toggleItem, false);
    }
    item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);


When I display the output the three bars to open the mobile menu is not where it needs to be.
image
can someone tell me how to put the three bars where the arrow is pointing at?

You’re closing your <ul> twice:

   </ul>
   <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
   </ul>

… so the menu icon isn’t part of the .menu flex container anymore.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.