実装されたスクリーン

コード#コード#

  <nav class="container">
    <div class="logo">
      <i class="fas fa-apple-alt"></i>
      <div><a href="">Apeachicetea</a></div>
    </div>
  
    <ul class="menu">
      <li><a href="">Home</a></li>
      <li><a href="">Gallary</a></li>
      <li><a href="">Weddings</a></li>
      <li><a href="">FAQ</a></li>
      <li class="menu__last"><a href="">Bookings</a></li>
    </ul>

    <ul class="icons">
      <li><a href=""><i class="fab fa-instagram"></i></a></li>
      <li><a href=""><i class="fab fa-facebook-square"></i></a></li>
    </ul>

    <div class="toggle__btn"><a href="#"><i class="fas fa-bars"></i></a></div>

  </nav>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

a {
  text-decoration: none;
  color: white;
}

li {
  list-style: none;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: brown;
  padding: 15px 30px;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 40px;
  color: white;
}

.logo i {
  padding-right: 10px;
}

.menu {
  display: flex;
  font-size: 30px;
}

.menu li {
  padding: 15px 60px;
}

.menu li:hover {
  background-color: tomato;
  border-radius: 5px;
}

.icons {
  display: flex;
  align-items: center;
}

.icons li {
  font-size: 30px;
  padding-right: 20px;
}

.toggle__btn {
  display: none;
}

@media screen and (max-width: 1200px) {
  .container {
    flex-direction: column;
  }

  .menu {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-left: 0;
  }

  .icons {
    display: flex;
    justify-content: center;
  }

  .toggle__btn {
    display: flex;
    position: absolute;
    right: 30px;
    font-size: 30px;
  }

  .menu.active,
  .icons.active {
    display: none;  
  }

}

const toggleBtn = document.querySelector('.toggle__btn');
const menu = document.querySelector('.menu');
const icons = document.querySelector('.icons');

toggleBtn.addEventListener('click', () => {
  menu.classList.toggle('active');
  icons.classList.toggle('active');
});

実施方法