title: Trying to make an interactive search bar that opens and closes when you click it, but having issues with the open-source code I found for it
body: <p>So I was able to modify the dimentions of the search bar to fit what I want it to look like, but there are some issues with the &quot;animation&quot;.</p>
  <p>What its supposed to look like is this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
   &lt;html lang="en"&gt;
   &lt;head&gt;
       &lt;meta charset="UTF-8"&gt;
       &lt;title&gt;Document&lt;/title&gt;
       &lt;style&gt;
       :root {
       --line-thickness: 0.25em;
       --glass-size: 65%;
       --icon-height: 7rem;
       --transition-speed: 0.35s;
       --timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
       --icon-color: white;
  }
   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
  }
   body {
       background: linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%);
       background-repeat: no-repeat;
       background-attachment: fixed;
  }
   .search-icon {
       box-sizing: border-box;
       width: var(--icon-height);
       height: var(--icon-height);
       max-width: 20em;
       transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
       position: fixed;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       margin: auto;
       border: solid var(--line-thickness);
       border-color: rgba(255, 255, 255, 0);
       border-radius: 100px;
       padding: 0.25em;
  }
   .search-icon__wrapper {
       width: var(--icon-height);
       height: var(--icon-height);
       position: absolute;
       border-radius: 100px;
       top: 0;
       bottom: 0;
       right: 0;
       margin: auto 0;
       transform: rotate(-45deg);
       transition: all 0 linear;
  }
   .search-icon__wrapper:hover {
       cursor: pointer;
  }
   .search-icon__input {
       background: none;
       text-align: center;
       outline: none;
       display: block;
       border: none;
       background: rgba(255, 255, 255, 0);
       width: calc(100% - (var(--icon-height) / 2 + 1rem));
       margin-right: 6rem;
       height: 100%;
       border-radius: 100px;
       transition: all var(--transition-speed) linear;
       font-size: 2em;
       padding: 0 0.5em;
       color: white;
  }
   .search-icon__input::placeholder {
       color: rgba(255, 255, 255, .75);
  }
   .search-icon__glass {
       width: var(--glass-size);
       height: var(--glass-size);
       border: solid var(--line-thickness);
       border-color: var(--icon-color);
       border-radius: 100px;
       margin: 0 auto;
       position: relative;
       transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
  }
   .search-icon__handle {
       height: calc(100% - var(--glass-size));
       width: var(--line-thickness);
       margin: 0 auto;
       background: var(--icon-color);
       position: absolute;
       border-radius: 0 0 100px 100px;
       left: 0;
       right: 0;
       bottom: 0;
       transition: all var(--transition-speed) var(--timing-function);
       transition-delay: var(--transition-speed);
  }
   .search-icon__handle::after {
       content: "";
       display: block;
       position: absolute;
       width: 100%;
       height: 100%;
       border-radius: inherit;
       background: var(--icon-color);
       transform: rotate(0deg);
       transition: all var(--transition-speed) var(--timing-function);
       transition-delay: 0s;
  }
   .search-icon.open {
       width: calc(100vw - 1em);
       border-color: var(--icon-color);
       transition-delay: var(--transition-speed);
  }
   .search-icon.open .search-icon__input {
       transition-delay: var(--transition-speed);
  }
   .search-icon.open .search-icon__glass {
       width: 100%;
       height: 100%;
       transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
       border-color: rgba(0, 0, 0, 0);
  }
   .search-icon.open .search-icon__handle {
       bottom: calc(50% - (100% - var(--glass-size)) / 2);
       border-radius: 100px;
       transition-delay: 0s;
  }
   .search-icon.open .search-icon__handle::after {
       transition-delay: var(--transition-speed);
       transform: rotate(90deg);
  }
   
       &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
       &lt;div class="search-icon"&gt;
    &lt;input class="search-icon__input" placeholder="search ..."&gt; 
    
    &lt;div class="search-icon__wrapper"&gt;
      &lt;div class="search-icon__glass"&gt;&lt;/div&gt;
      &lt;div class="search-icon__handle"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
       
       const searchIcon = document.querySelector(".search-icon__wrapper");
  
  searchIcon.addEventListener("click", e =&gt; searchIcon.parentElement.classList.toggle("open"))
       
       
       &lt;/script&gt;
   &lt;/body&gt;
   &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But whats happening with my code is this: (please view in full page mode)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&amp;display=swap" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&amp;display=swap" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&amp;display=swap" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&amp;display=swap" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&amp;display=swap" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Oswald&amp;display=swap" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Acme&amp;display=swap" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,200&amp;display=swap" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Fjalla+One&amp;display=swap" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&amp;display=swap" rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css2?family=Allerta&amp;display=swap" rel="stylesheet"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
  
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" /&gt;
      &lt;style&gt;
          .third-level-menu {
              position: absolute;
              top: 0;
              right: -190px;
              width: 190px;
              list-style: none;
              padding: 0;
              margin: 0;
              display: none;
          }
  
          .third-level-menu&gt;li {
              height: 45px;
              background-color: #6640C1;
              background: #6640C1;
          }
  
          .third-level-menu&gt;li:hover {
              background-color: gold;
          }
  
          .second-level-menu {
              position: absolute;
              top: 45px;
              left: 0;
              width: 100%;
              /* width: 273.2px; */
              list-style: none;
              padding: 0;
              margin: 0;
              display: none;
          }
  
          .second-level-menu&gt;li {
              position: relative;
              height: 45px;
              background-color: #6640C1;
              background: #6640C1;
              width: 100%;
          }
  
          .second-level-menu&gt;li:hover {
              background-color: gold;
          }
  
          .top-level-menu {
              display: flex;
              list-style: none;
              padding: 0;
              margin: 0;
              width: 100%;
              height: 100px;
              z-index: 1;
              justify-content: space-between;
  
          }
  
          .top-level-menu&gt;li {
              position: relative;
              height: 30px;
              /* width: 273.2px; */
              background: #6640C1;
              z-index: 2;
              text-align: center;
              flex: 1;
  
          }
  
          .top-level-menu&gt;li:hover {
              background-color: gold !important;
          }
  
          .top-level-menu li:hover&gt;ul {
              /* On hover, display the next level's menu */
              display: inline;
  
  
          }
  
  
          /* Menu Link Styles */
  
          .top-level-menu a
  
          /* Apply to all links inside the multi-level menu */
              {
              font-family: 'Fjalla One', sans-serif;
              color: #FFFFFF;
              text-decoration: none;
              padding: 0 0 0 10px;
              background: #6640C1;
  
  
              /* Make the link cover the entire list item-container */
              display: block;
              line-height: 45px;
          }
  
          .top-level-menu a:hover {
              color: #000000;
              background-color: gold;
          }
  
  
  
          .container2 {
              max-width: 1500px;
              margin: auto;
              overflow: auto;
          }
  
          .container-top {
              position: fixed;
              background-color: gold;
              top: 0;
              width: 100%;
              height: 10%;
              z-index: 1;
              text-align: center;
  
          }
  
          .top {
              display: inline-block;
              font-family: 'Permanent Marker', cursive;
              font-size: 30px;
              width: 100%;
              margin: -20px;
              z-index: 1;
          }
  
          .footer {
              position: relative;
              background-color: white;
              font-family: 'Alfa Slab One', cursive;
              width: 100%;
              color: black;
              margin: 50px 0 0 0px;
              height: 20px;
  
          }
  
          :root {
              --line-thickness: 0.1em;
              --glass-size: 20%;
              --icon-height: 7rem;
              --transition-speed: 0.35s;
              --timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
              --icon-color: black;
          }
  
          /* this is already done  */
  
          * {
              box-sizing: border-box;
  
  
          }
  
          body {
              margin: 0;
              background: white;
              background-repeat: no-repeat;
              background-attachment: fixed;
  
          }
  
          .search-icon {
              box-sizing: border-box;
              width: 30px;
              height: 30px;
              max-width: 20em;
              transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
              position: fixed;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              margin: auto;
              border: solid var(--line-thickness);
              border-color: rgba(255, 255, 255, 0);
              border-radius: 100px;
              padding: 0.25em;
          }
  
          .search-icon__wrapper {
              width: var(--icon-height);
              height: var(--icon-height);
              position: absolute;
              border-radius: 100px;
              top: 0;
              bottom: 0;
              right: 0;
              margin: auto 0;
              transform: rotate(-45deg);
              transition: all 0 linear;
          }
  
          .search-icon__wrapper:hover {
              cursor: pointer;
          }
  
          .search-icon__input {
              background: none;
              text-align: center;
              outline: none;
              display: block;
              border: none;
              background: rgba(255, 255, 255, 0);
              width: calc(90% - (var(--icon-height) / 2 + 1rem));
              margin-right: 6rem;
              height: 100%;
              border-radius: 100px;
              transition: all var(--transition-speed) linear;
              font-size: 20px;
              padding: 0 0.5em;
              color: black;
  
  
          }
  
          .search-icon__input::placeholder {
              color: rgba(255, 255, 255, .75);
          }
  
          .search-icon__glass {
              width: var(--glass-size);
              height: var(--glass-size);
              border: solid var(--line-thickness);
              border-color: var(--icon-color);
              border-radius: 100px;
              margin: 0 auto;
              position: relative;
              transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
          }
  
          .search-icon__handle {
              height: calc(30% - var(--glass-size));
              width: var(--line-thickness);
              margin: 0 auto;
              background: var(--icon-color);
              position: absolute;
              border-radius: 0 0 100px 100px;
              left: 0;
              right: 0;
              bottom: 0;
              transition: all var(--transition-speed) var(--timing-function);
              transition-delay: var(--transition-speed);
          }
  
          .search-icon__handle::after {
              content: "";
              display: block;
              position: absolute;
              width: 100%;
              height: 100%;
              border-radius: inherit;
              background: var(--icon-color);
              transform: rotate(0deg);
              transition: all var(--transition-speed) var(--timing-function);
              transition-delay: 0s;
  
          }
  
          .search-icon.open {
              width: 200px;
              border-color: var(--icon-color);
              transition-delay: var(--transition-speed);
          }
  
          .search-icon.open .search-icon__input {
              transition-delay: var(--transition-speed);
          }
  
          .search-icon.open .search-icon__glass {
              width: 45%;
              height: 45%;
              transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
              border-color: rgba(0, 0, 0, 0);
          }
  
          .search-icon.open .search-icon__handle {
              bottom: calc(50% - (100% - var(--glass-size)) / 2);
              border-radius: 100px;
              transition-delay: 0s;
          }
  
          .search-icon.open .search-icon__handle::after {
              transition-delay: var(--transition-speed);
              transform: rotate(90deg);
          }
      &lt;/style&gt;
      &lt;title&gt;TheLeague.com&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;main&gt;
          &lt;div class="container-top"&gt;
              &lt;div class="top"&gt;
                  &lt;p&gt;Shop 20% Off All Jerseys Now!&lt;/p&gt;
              &lt;/div&gt;
  
  
          &lt;/div&gt;
          &lt;div class="footer"&gt;
              &lt;div style="float:right; margin: 0 auto;"&gt;
                  &lt;div class=" search-icon" style="margin-right: 50px;"&gt;
                      &lt;input class="search-icon__input" placeholder="search ..."&gt;
  
                      &lt;div class="search-icon__wrapper"&gt;
                          &lt;div class="search-icon__glass"&gt;&lt;/div&gt;
                          &lt;div class="search-icon__handle"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;"&gt;
              &lt;a style="text-decoration: none;" href="#"&gt;
                  &lt;h1&gt;The&lt;u&gt;League&lt;/u&gt;&lt;/h1&gt;
              &lt;/a&gt;
  
          &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;ul class="top-level-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-home" style="font-size: 20px;"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;&lt;i class="fa fa-tag" style="font-size: 20px"&gt;&lt;/i&gt; Shop All &amp;#x25BC; &lt;/a&gt;
                  &lt;ul class="second-level-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Jerseys&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Hats&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Gym Shorts&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-flask" style="font-size: 20px;"&gt;&lt;/i&gt; Customize&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;&lt;i class="fa fa-futbol-o" style="font-size: 20px;"&gt;&lt;/i&gt; Teams &amp;#x25BC;&lt;/a&gt;
                  &lt;ul class="second-level-menu"&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Soccer&lt;/a&gt;
                          &lt;ul class="third-level-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Barcelona&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;PSG&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Real Madrid&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Basketball&lt;/a&gt;
                          &lt;ul class="third-level-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Golden State Warriors&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Celtics&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Chicago Bulls&lt;/a&gt;&lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Football&lt;/a&gt;
                          &lt;ul class="third-level-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;New England Patriots&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Ravens&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Atlanta Falcons&lt;/a&gt;&lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"&gt;&lt;/i&gt; Contacts Us&lt;/a&gt;
              &lt;/li&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
  
          &lt;script&gt;
  
              const searchIcon = document.querySelector(".search-icon__wrapper");
  
              searchIcon.addEventListener("click", e =&gt; searchIcon.parentElement.classList.toggle("open"))
  
  
          &lt;/script&gt;
      &lt;/main&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The &quot;handle&quot; of the search icon isn't attached to the &quot;glass&quot; portion of the search icon, and the handle should stay within the search icon when it expands which its not doing.</p>
  <p>What I would like is for it to look the way I showed in the first snippet and be located in the top right on the same line as &quot;TheLeague&quot;.</p>
  <p>If anyone can help me out I'd really appreciate it.</p>
  <p>Thanks</p>