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

Question

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

现在发生的情况是导航栏根本不显示。 标头是一个弹性容器，其中包含 2 个嵌套的弹性容器。 右侧的那个应该显示，除非屏幕低于 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= 标题中具有导航链接类的每个元素> 导航> .menu> .menu-item
• header nav .menu-item .login= 标头中具有登录类的每个元素> 导航> .menu-item
• header nav .menu .menu-item= 标题中的每个元素>导航> .menu
• 因此，如果您为.menu-item设置了display: none;，则必须为同一项目设置display: block;(或其他(，而不是导航链接或登录类

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