添加媒体查询时，导航栏不显示

Question

希望有人能在这里帮助我。我最初为桌面设计网页。现在我正在尝试优雅地降级，并为较小的屏幕添加功能。

现在发生了什么，导航栏根本不显示。 header 是一个 flex 容器，其中有 2 个嵌套的 flex 容器。右边的应该会显示，除非屏幕低于 376px。

我不知道为什么...

.nav-container {
  flex-direction: column;
  display: flex;
  width: 100vw;
  max-width: 100%;
  height: auto;
  background-color: #0092FF;
}

header {
  display: flex;
  width: 100%;
  height: 80px;
  flex-direction: row;
  flex-shrink: 0;
  top: 0px;
}

header nav .logo {
  float: left;
  margin-left: 6.25em;
  margin-top: 22px;
  width: 215px;
  height: 40px;
}

header nav .menu .menu-item {
  display: none;
  /* position: absolute;
  z-index: 100;
 */
}

@media screen and (min-width:23.5em) {
  header nav .menu {
    display: inline-block;
    display: flex;
    margin-right: 6.25em;
    margin-top: 0;
    justify-content: flex-end;
  }
  header nav .menu .menu-item .nav-link {
    flex-direction: row;
    padding-right: 60px;
    display: inline-block;
    margin-top: 31px;
    font-size: 1.125em;
    font: Semibold 18px/22px Proxima Nova;
    align-items: center;
    letter-spacing: 0;
    color: #FFFFFF;
    opacity: 1;
    text-decoration: none;
    outline: none;
  }
  header nav .menu-item .login {
    display: inline-block;
    width: 104px;
    height: 40px;
    background-color: Transparent;
    color: white;
    border: 2px solid #fff;
    border-radius: 40px;
    text-align: center;
    outline: none;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.125em;
    margin-top: 22px;
  }
}

<div>
  <header class="nav-container">
    <nav>
      <div class="logo"><img src="./images/overpass.svg" alt="overpass"></div>
      <ul class="menu">
        <li class="menu-item"><a href="" class="nav-link">Features</a></li>
        <li class="menu-item"><a href="" class="nav-link">Pricing</a></li>
        <li class="menu-item"><button type="button" class="login">Login</button></li>
      </ul>
    </nav>
  </header>
</div>

Answer 1

要显示导航栏，您需要在媒体查询中添加：

header nav .menu .menu-item {
  display: block;
}

更多解释：

header nav .menu .menu-item .nav-link = header > nav > .menu > .menu-item[= 中带有 nav-link class 的每个元素33=]
header nav .menu-item .login = header > nav > .menu-item

login

header nav .menu .menu-item = header > nav > .menu

menu-item

因此，如果您为 .menu-item 设置 display: none;，那么您必须为同一项目设置 display: block;（或其他），不是 nav-link 或 login class

Answer 2

我已经应用了上面的建议。现在有效：

.nav-container {
  flex-direction: column;
  display: flex;
  width: 100vw;
  max-width: 100%;
  height: auto;
  background-color: #0092FF;
}

header {
  display: flex;
  width: 100%;
  height: 80px;
  flex-direction: row;
  flex-shrink: 0;
  top: 0px;
}

header nav .logo {
  float: left;
  margin-left: 6.25em;
  margin-top: 22px;
  width: 215px;
  height: 40px;
}
header nav .menu .menu-item {
  display: none;
  /* position: absolute;
  z-index: 100;
 */
}

@media screen and (min-width:23.5em) {
    header nav .menu {
      display: inline-block;
      display: flex;
      margin-right: 6.25em;
      margin-top: 0;
      justify-content: flex-end;
    }

    header nav .menu .menu-item {
      display: inline-block;
      flex-direction: row;
      margin-top: 1.94em;
    }

      header nav .menu .menu-item .nav-link{
      padding-right: 60px;
      font-size:  1.125em;
      font: Semibold 18px/22px Proxima Nova;
      align-items: center;
      letter-spacing: 0;
      color: #FFFFFF;
      opacity: 1;
      text-decoration: none;
      outline: none;
    }

    header nav  .menu-item .login {
      display: inline-block;
      width: 104px;
      height: 40px;
      background-color: Transparent;
      color: white;
      border: 2px solid #fff;
      border-radius: 40px;
      text-align: center;
      outline: none;
      vertical-align: middle;
      text-decoration: none;
      font-size:  1.125em;
      margin-top: -0.5em;
    }

  }

添加媒体查询时，导航栏不显示

When adding the media query, the nav bar does not display

html

css

media-queries