菜单打开问题和图像对齐问题

Question

这是菜单https://jsfiddle.net/coyj1drv/1/

的小提琴

<!--I want to have the image above the links and the menu to open and close through the hamburger menu. I have tried multiple times to create that but it is not working. Hope you can help-->

<input type="submit" id="btn" value="Menu" onclick="toggle()" />
<div class="homepage-menu-search-icon" alt=
"search-button" id="aside"><img alt="Search Icon" height="30px" src="test"></div>
<div class="homepage-menu-open-icon">
  <a onclick="myFunction(this)">
    <div class="homepage-menu-open">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </a>
  <menu id="menu">
    <nav class="nav-homepage">
      <div class="homepage-menu-wrapper">

        <div class="overlay" id="av">
          <div class="overlay-content">
            <div class="menu-search-bar">
              <form action="#" id="search-form" method="get" name="search-form">
                <input class="search-input" maxlength="80" name="Search" size="21" type="text">
                <input class="search-submit" type="submit" value="search">
              </form>
            </div>
            <div class="menu-home">
              <img src="test" height="40px">
              <a href="#">Link 1</a>
            </div>
            <div class="menu-about-us">
              <img src="test" height="40px">
              <a href="#">Link 2</a>
            </div>
            <div class="menu-book-city">
              <img src="test" height="40px"><a href="#">Link 3</a> <img src="test" height="20px"><a href="#">Link 4</a> <img src="test" height="20px"><a href="#">Link 5</a><img src="test" height="20px"> <a href="#">Book 6</a>
            </div>
            <div class="menu-rhyme-town">
              <img src="test" height="40px">
              <a href="#">Link 7</a>
            </div>
            <div class="menu-fantasy-city">
              <img src="test" height="40px">
              <a href="#">Link 8</a>
            </div>
            <div class="menu-advert">
              <div class="advert-link-wrapper">
                <div class="link-logo">
                  <a href="/link"><img src="images" width="300px" height="80px"></a>
                </div>
                <div class="button-wrapper" id="track-click">
                  <div class="visit-button">
                    <a><h2 class="visit-button">Visit</h2></a>
                  </div>
                </div>
                <div class="advert-hero-text-wrapper">
                  <div class="hero-text">
                    <h1 class="marketing">The best place to buy books.</h1>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <script>
        function myFunction(x) {
          x.classList.toggle("change");
        }

      </script>
      </nav>
      </menu>
      </div>
<script>
  function toggle() {
    var menu = document.getElementById('menu');
    if (menu.style.display === 'none') {
      menu.style.display = 'block';
    } else {
      menu.style.display = 'none';
    }
  }

</script>


    body {
  background: black;
}

a {
  font-family: 'sans-serif';
  text-decoration: none;
  color: white;
  font-weight: 100;
  font-size: 20px;
  padding: 10px 20px;
}

.homepage-menu-open {
  display: inline-block;
  cursor: pointer;
  float: left;
}

.bar1,
.bar2,
.bar3 {
  width: 40px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
  border: 2%;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-7px, -8px);
}

.homepage-menu-search-icon {
  position: fixed;
  top: 1.8%;
  right: 18%;
}

.homepage-menu-search-icon img {
  cursor: pointer;
  position: fixed;
  float: left;
}

.links {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

section {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#menu {
  background: gray;
  text-align: center;
  color: white;
  padding: 0;
  height: 100%;
}

.link-logo {
  padding-top: 30px;
}

.visit-button {
  padding: 0;
  margin: 0;
}

有两件事我遇到困难： 1）从汉堡菜单和搜索按钮（右上角的图像）打开和关闭菜单。我想隐藏提交按钮。 2）对齐链接上方的图像。

我创建了一个，您可以了解最终菜单应该是什么样子。

度过美好的一天！