<header class="header_body">
<div class="container">
<div class="header">
<a href="#" class="logo">
лого</a>
<div class="burger_menu">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="16" viewBox="0 0 20 16">
<image id="menu" width="20" height="16" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAAP0lEQVQ4jWOUUEr+z0BFwMLAwPCR2gYKUNNAJmoaNkINBEUKVZMNTVzISE0DR5MN5QAUKR+obSA/1UxjYGAAAL1LBMg8tVD+AAAAAElFTkSuQmCC"/>
</svg>
</div>
<nav class="nav">
<ul>
<li class="nav_list">Услуги</li>
<li class="nav_list">Специалисты</li>
<li class="nav_list">Работы</li>
<li class="nav_list">Документы</li>
<li class="nav_list">Новости</li>
<li class="nav_list">Контакты</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="block">dskfdsnjf</div>
body{
background-color: #c1c1;
margin:0;
padding: 0;
}
.container{
width: 100%;
max-width: 1170px;
padding: 0 10px;
margin: 0 auto;
}
.header_body{
width: 100%;
height: 80px;
background-color: #fff;
display: flex;
align-items: center;
position: relative;
}
.header-banner_content{
display: flex;
flex-direction: column;
}
.header{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
a.logo{
width: 243px;
height: 50px;
}
.nav {
width: 65%;
}
.nav ul{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
li.nav_list{
font-size: 16px;
font-family: 'Gilroy-Medium';
color: #212121;
list-style: none;
cursor: pointer;
}
li.nav_list:hover{
color: #807e7e;
transition: .3s;
}
.burger_menu{
display: none;
}
@media (max-width: 1280px){
.container{
width: 768px;
}
a.logo{
width: 162px;
height: 33px;
}
.nav{
width: 60%;
}
li.nav_list{
font-size: 14px;
}
}
@media (max-width: 860px){
.burger_menu{
display: block;
cursor: pointer;
}
.nav{
position: fixed;
width: 100%;
height: calc(100vh - 80px);
background-color: #fff;
left: 0;
top: 80px;
}
.nav ul{
flex-direction: column;
}
.nav ul li.nav_list{
padding: 10px 0;
}
.header_body{
position: absolute;
z-index: 16;
}
.container{
width: 480px;
}
a.logo{
width: 133px;
height: 28px;
}
}
.block{
width: 500px;
height: 1000px;
background-color: black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.