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

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

现在的情况是导航栏根本不显示。 标头是一个flex容器，其中包含两个嵌套的flex容器。 右边的应该显示，除非屏幕低于376px

我不知道为什么

.导航集装箱{ 弯曲方向：立柱； 显示器：flex； 宽度：100vw； 最大宽度：100%； 高度：自动； 背景色：0092FF； } 标题{ 显示器：flex； 宽度：100%； 高度：80px； 弯曲方向：行； 弹性收缩：0； 顶部：0px； } 标题导航标志{ 浮动：左； 左边距：6.25em； 边缘顶部：22px； 宽度：215px； 高度：40px； } 标题导航菜单菜单项{ 显示：无； /*位置：绝对位置； z指数：100； */ } @媒体屏幕和最小宽度：23.5em{ 标题导航菜单{ 显示：内联块； 显示器：flex； 右边距：6.25em； 边际上限：0； 证明内容：柔性端； } 标题导航.菜单.菜单项.导航链接{ 弯曲方向：行； 右边填充：60px； 显示：内联块； 边缘顶端：31像素； 字号：1.125em； 字体：Semibold 18px/22px Proxima Nova； 对齐项目：居中； 字母间距：0； 颜色：FFFFFF； 不透明度：1； 文字装饰：无； 大纲：无； } 标题导航菜单项。登录{ 显示：内联块； 宽度：104px； 高度：40px； 背景色：透明； 颜色：白色； 边框：2个实心fff； 边界半径：40px； 文本对齐：居中； 大纲：无； 垂直对齐：中间对齐； 文字装饰：无； 字号：1.125em； 边缘顶部：22px； } } 登录

---

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

标题导航菜单菜单项{ 显示：块； } 有关更多说明：

header nav.menu.menu item.nav link=header>nav>.menu>.menu item中具有nav link类的每个元素 header nav.menu item.login=在header>nav>菜单项中具有login类的每个元素 header nav.menu.menu item=在header>nav>菜单中具有菜单项类的每个元素 因此，如果设置display:none；对于.菜单项，则必须设置显示：块；或其他相同项目，而不是导航链接或登录类

---

我已经应用了上面的建议。它现在可以工作了：

.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;
    }

  }

---

您正在隐藏标题nav.menu.menu项，但在大小大于376时不显示它们。只需将标题nav.menu.menu项{display:inline block}添加到您的@media block.hi Derek，我按照您的建议做了，但绝对没有效果！！我正在修改代码以反映更改。您有大量语法错误。首先，我建议您在浏览器检查器上查看您的页面并修复各种错误。我已经更正了语法错误。