I am in the process of creating a straightforward navigation bar. My goal is to have the <nav> content, which includes the navigation links, positioned inside the header along with the logo (a random image from unsplash.it). To achieve this layout, I want it to activate when the screen width exceeds 780px. Therefore, I enclosed the code within a media query. However, the implementation seems to be ineffective as the browser fails to recognize the display: grid command provided.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Century Gothic, Tahoma, sans-serif;
font-size: 16px;
}
a {
color: inherit;
text-decoration: none;
}
body {
background: black;
margin-bottom: 1000px;
}
/* -----DROPDOWN MOBILE MENU----- */
header {
background: rgba(217, 30, 24, 1);
position: fixed;
width: 100vw;
z-index: 999;
border: solid white 0px;
display: flex;
justify-content: center;
}
header .img {
width: 10em;
height: 3em;
margin: 1em;
border: solid black 1px;
transform: scale(1, 1);
transition: transform ease-in-out 250ms;
border-radius: 5px;
}
header .img:hover {
transform: scale(1.025, 1.025);
}
header nav {
background: rgba(217, 30, 24, .85);
width: 100vw;
border: solid white 0px;
position: absolute;
top: 100%;
left: 0;
display: flex;
justify-content: center;
}
header nav ul {
width: 20%;
border: solid white 0px;
display: flex;
flex-flow: column;
align-items: center;
}
header nav ul li {
list-style: none;
color: white;
padding: .5rem;
}
header nav ul li:hover {
color: rgba(245, 245, 245, .7);
cursor: pointer;
}
/* -----QUERY FOR LARGE SCREENS----- */
@media (min-width:780px) {
header {
border: solid white 1px;
display: grid;
grid-template-columns: 1fr auto 1fr 1fr;
align-items: center;
}
header .img {
border: solid blac 3px;
border-radius: 5px;
width: 10rem;
height: 3rem;
transform: scale(1, 1);
transition: transform ease-in-out 250ms;
grid-column: 2 / 3;
}
header .img:hover {
transform: scale(1.025, 1.025);
}
header nav {
background: rgba(217, 30, 24, 1);
border: solid white 1px;
width: 50vw;
grid-column: 4 / 5;
}
header nav ul {
display: flex;
flex-flow: row;
list-style: none;
border: solid white 0px;
width: 100%;
justify-content: space-around;
cursor: pointer;
}
header nav ul li::before {
content: '';
display: block;
height: 2px;
width: 0%;
background: ivory;
position: absolute;
bottom: 0px;
transition: ease-in-out .25s;
-webkit-transition-duration: .25s;
-o-transition-duration: .25s;
-moz-transition-duration: .25s;
}
header nav ul li {
color: white;
display: flex;
border: solid black 0px;
justify-content: center;
align-items: center;
transition-duration: .5s;
-webkit-transition-duration: .5s;
-o-transition-duration: .5s;
-moz-transition-duration: .5s;
position: relative;
padding: 0;
padding-bottom: .5rem;
}
header nav ul li:hover {
color: rgba(245, 245, 245, .7);
}
header nav ul li:hover::before {
width: 100%;
}
}
<!-- END LARGE-SCREEN QUERIES --> <header>
<a href="#"><img class="img" src="//unsplash.it/300/100"></a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support us</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</header>