汉堡菜单 - 垂直对齐列表项

Question

我正在尝试在媒体查询上创建一个汉堡菜单，以垂直显示所有列表项，以便它适合手机屏幕，但 flex-direction: column 不想工作。

我认为问题出在 CSS 类 .topnav.responsive a 的某个地方。

有人有解决办法吗？

谢谢

HTML

<header id="header-home">
  <nav id="main-nav" class="sticky">
    <div class="container">
      <div class="nav-content">
        <img src="img/logo.png" alt="Alikis Treff" id="logo" />
        <ul class="topnav" id="myTopnav">
          <li><a href="#home">Home</a></li>
          <li><a href="#darts">Darts</a></li>
          <li><a href="#drinks">Gertänkekarte</a></li>
          <li><a href="#opening">Öffnungszeiten</a></li>
          <li><a href="#reserve">Reservierung</a></li>
          <li><a href="#contact">Kontakt</a></li>
          <li>
            <a
              href="javascript:void(0);"
              class="icon"
              onclick="myFunction()"
            >
              <i class="fa fa-bars fa-2x"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

CSS

#main-nav {
  background: $dark-color;
  height: 4rem;

  ul {
    display: flex;
  }

  li {
    padding: 1rem 2rem;
  }

  a {
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 1.2px;
    padding: 0.3rem;
    border-radius: 5px;

    &:hover {
      color: $dark-color;
      background: $light-color;
      transition: all ease 250ms;
    }
  }

  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .topnav .icon {
    display: none;
  }
}

媒体

@media screen and (max-width: 600px) {
  #main-nav {
    .topnav a {
      display: none;
    }

   .topnav a.icon {
      display: flex;
     justify-content: space-between;
   }

  .topnav.responsive a {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

JS

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

Answer 1

您不需要在移动设备中使用 display flex。 在媒体屏幕中，您的导航必须显示：块