Hope someone can help me here. I initially design the web page for a desk top. now I am trying to gracefully - degrade, and add features for smaller screens.
What happens now, is that the navbar does not show up at all. the header is a flex container that has 2 nested flex containers within it. The one on the right is supposed to display, unless the screen goes below 376px.
I am not sure why...
.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-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;
}
}<meta name="viewport" , content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><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>