Я создаю адаптивную навигационную панель по сетке CSS. Я разделил сетку Navbar на 4 столбца и 1 строку. и все идет хорошо на экранах рабочего стола.
(на экранах max-width: 952px): происходит перекрытие между элементами сетки. (на экранах max-width: 858px): сетка дает мне 2 строки, хотя я определяю ее как 1 строку.
что мне не хватает в моем коде?
вот html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Markvira</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Local CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css' %}">
</head>
<body>
<!--Wrapper to wrap everything-->
<div class="grid-container">
<div class="Header">
<input type="checkbox" id="check"/>
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<div class="brand-img">
<a href=""><img src="{% static 'images/markvira-logo.png' %}" alt=""> </a>
</div>
<ul class="main-links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">contact</a></li>
</ul>
<ul class="sm-links">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-youtube"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-whatsapp"></a></li>
</ul>
</div>
<main class="main-index">
<div class="index-SecA">
<h1>Hero</h1>
</div>
<div class="SecB">
<h1>Hero</h1>
</div>
<div class="SecC">
<h1>Mark-vira</h1>
</div>
<div class="SecD">
<h1>What-offer</h1>
</div>
<div class="SecE">
<h1>Why-Us</h1>
</div>
<div class="SecF">
<h1>Last-Client</h1>
</div>
</main>
<div class="Footer">
<h1>Footer</h1>
</div>
</div>
<!--End of Wrapper-->
</body>
</html>
вот css
/*Header*/
.Header{
grid-area: hd;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows:auto;
align-items: center;
background:#dcdcdc8c;
margin-top: 10px;
position: fixed; /* to make header sticky at top on scroll*/
width: 100%;
}
.brand-img{
grid-column: 1/2;
display: flex;
flex-direction: row;
justify-content:start;
}
.brand-img img{
width: 100px;
height: 75px;
margin-left: 20px;
}
.main-links{
grid-column: 2/4;
display: flex;
flex-direction: row;
justify-content: center;
}
.main-links li{
list-style: none;
}
.main-links a{
margin: 0px 10px;
text-decoration: none;
text-transform: uppercase;
font-family: poppins;
font-size: 16px;
font-weight: 400;
color: #ffff;
border-bottom: 3px solid transparent;
}
.main-links a:hover{
color: black;
border-bottom: 3px solid brown;
transition: all 0.5s ease-in;
}
.main-links a.hover{
color: blue;
border-bottom: 3px solid brown;
}
.sm-links{
grid-column: 4/5;
display: flex;
flex-direction: row;
justify-content: center;
}
.sm-links li{
list-style: none;
}
.sm-links a{
height: 30px;
width: 30px;
line-height: 30px;
margin: 0px 4px;
text-decoration: none;
text-align: center; /*make social media icons at the center of black circle background*/
font-size: 18px;
cursor: pointer;
color: #ffff;
background: black;
border: 2px solid #fff;
border-radius: 50%;
}
.sm-links .fa-facebook:hover{
color: #3b5998;
border: 2px solid #3b5998;
box-shadow: 0 0 15px #3b5998;
transition: all 0.5s ease;
}
.sm-links .fa-instagram:hover{
color: #c32aa3;
border: 2px solid #c32aa3;
box-shadow: 0 0 15px #c32aa3;
transition: all 0.5s ease;
}
.sm-links .fa-twitter:hover{
color: #1da1f2;
border: 2px solid #1da1f2;
box-shadow: 0 0 15px #1da1f2;
transition: all 0.5s ease;
}
.sm-links .fa-youtube:hover{
color: #ff0000;
border: 2px solid #ff0000;
box-shadow: 0 0 15px #ff0000;
transition: all 0.5s ease;
}
.sm-links .fa-linkedin:hover{
color: #007bb6;
border: 2px solid #007bb6;
box-shadow: 0 0 15px #007bb6;
transition: all 0.5s ease;
}
.sm-links .fa-whatsapp:hover{
color: #25d366;
border: 2px solid #25d366;
box-shadow: 0 0 15px #25d366;
transition: all 0.5s ease;
}
.checkbtn{
grid-column: 4/5;
font-size: 30px;
color: black;
justify-self: center;
line-height: 70px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
@media (max-width:952px){
.brand-img img{
width: 90px;
height: 65px;
margin-left: 15px;
}
.main-links a{
margin: 0px 8px;
font-size: 12px;
font-weight: 300;
}
.sm-links a{
height: 20px;
width: 20px;
line-height: 20px;
margin: 0px 3px;
font-size: 13px;
}
}
@media (max-width:858px){
.checkbtn{
display: block;
}
.main-links, .sm-links{
display: none;
text-align: center;
width: 50%;
}
li{
display: block;
}
#check:checked ~ ul {
left: 0;
display: block;
}
}
скриншот для Navbar на маленьком экране