I am new into web development, I am learning CSS right now. I have chosen as project for beginning my personal portfolio.

I am creating an easy navigation bar, I wanted to add hamburger Icon, but when I have added Icon to navbar the icon is stack at the bottom of the navbar and the animation(the lines are crossed like X, when button is toggled). I want the Icon in the left corner of the navbar.

I have tried to add the Icon outside the list, to nav but it overflow <h1> tag, so I have tried to add to <aside> parent, but it overflows the <h1> tag as well.

body {
  background: linear-gradient(180deg, rgb(70, 65, 70), rgb(172, 34, 32));
}

.menu {
  border: 2px solid white;
  position: sticky;
  display: flex;
  flex-direction: row;
  height: 95vh;
  width: 17%;
  background: linear-gradient(180deg, #241023ff, #6b0504ff);
  /*linear-gradient(180deg, #2274a5ff, #f75c03ff);*/
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: 0.5s;
}

.wrapper {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: flex-start;
}

.container {
  margin-top: 10px;
  width: 100%;
  height: 25px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.menu-logo {
  height: 3px;
  width: 30px;
  background-color: white;
}

.showmenu {
  width: 25%;
}


/* #endregion Toggle button animation*/


/* #region Hover effect*/

nav:hover,
nav:active {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

li a:hover,
li a:active {
  font-weight: bold;
  border: 1px solid white;
  border-radius: 10px;
  background: rgb(246, 246, 246);
  transition: 0.5s;
}

li a:hover svg,
li a:active svg {
  fill: #f75c03ff;
}

li a:hover span,
li a:active span {
  color: #f75c03ff;
  stroke: #f75c03ff;
}


/* #endregion Hover effect*/

nav {
  width: 100%;
  display: list-item;
  text-align: center;
  justify-content: center;
}


/* #region Welcome text*/

nav .welcome-text {
  width: 100%;
  margin-left: auto;
  display: flex;
  justify-content: center;
  font-size: 3.5vw;
  margin-bottom: 60px;
  color: white;
  text-align: center;
}


/* #endregion Welcome text*/


/* #region Main content*/


/* #region Wave animation*/

.wave {
  width: 50%;
  animation-name: wave-animation;
  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;
  /* Change to speed up or slow down */
  animation-iteration-count: infinite;
  /* Never stop waving :) */
  transform-origin: 70% 70%;
  /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
  0% {
    transform: rotate( 0.0deg)
  }
  10% {
    transform: rotate(14.0deg)
  }
  /* The following five values can be played with to make the waving more or less extreme */
  20% {
    transform: rotate(-8.0deg)
  }
  30% {
    transform: rotate(14.0deg)
  }
  40% {
    transform: rotate(-4.0deg)
  }
  50% {
    transform: rotate(10.0deg)
  }
  60% {
    transform: rotate( 0.0deg)
  }
  /* Reset for the last half to pause */
  100% {
    transform: rotate( 0.0deg)
  }
}


/* #endregion Wave animation*/

nav ul {
  width: 100%;
  height: 100%;
  display: list-item;
}

nav ul li {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

li a {
  width: 100%;
  height: 7%;
  text-decoration: none;
  display: flex;
  text-align: left;
  font-size: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

li a span {
  width: 100%;
  font-size: 2.7vw;
  align-self: center;
  color: white;
  margin-left: 10px;
}

li a svg {
  width: 20%;
  height: 20%;
}

<aside >
  <div >
    <input  type="checkbox" name="" id="" />
    <div >
      <span ></span>
      <span ></span>
      <span ></span>
    </div>
  </div>

  <nav>

    <ul>

      <li>
        <h1 >Welcome <span >