К шапке сайта надо подключить поиск
Есть следующий код:
window.onscroll = function showHeader() {
var header = document.querySelector('.header');
if(window.pageYOffset > 50){
header.classList.add('header_fixed');
} else{
header.classList.remove('header_fixed');
}
}
.container{
width: 100%;
max-width: 92%;
margin: 0 auto;
}
.header-block{
position: relative;
z-index: 1;
width: 100%;
height: 75px;
background: #006091;
}
.header-inner{
display: flex;
justify-content: space-between;
align-items: center;
}
.header_fixed{
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
animation-name: showHeader;
animation-duration: 1s;
}
@keyframes showHeader{
0%
{
top: -70px;
opacity: 0;
}
100%
{
top: 0;
opacity: 1;
}
}
.logo{
width: 210px;
height: 75px;
background: url(../images/Logo.png);
-webkit-background-size: cover;
background-size: cover;
}
.logo a{
z-index: 100;
width: 210px;
height: 75px;
}
.nav{
font-size: 20px;
}
.nav-link{
position: relative;
display: inline-block;
margin: 0 15px;
padding-left: 10px;
vertical-align: top;
color: #fff;
border-left: 2px solid #fff;
}
.nav-link a:hover {
transition: all .2s ease;
color: #f2b46d;
}
.down, .up{
font-size: 13px;
}
.submenu{
width: 685px;
height: 220px;
margin-top: 80px;
background: #888;
opacity: 0.8;
display: none;
}
.submenu ul li {
float: none;
list-style: none;
text-align: center;
margin-bottom: 5px;
}
.submenu ul li a {
display: block;
width: 135px;
height: 20px;
text-decoration: none;
font-size: 17px;
color: white;
cursor: pointer;
padding-top: 3px;
}
<header class="header">
<div class="header-block">
<div class="container">
<div class="header-inner">
<a href="#">
<div class="logo">
</div>
</a>
<nav class="nav">
<ul class="menu">
<li class="nav-link"><a href="/images/page/a1.jpg">Абитуриенту
<span class="down"> ▼</span>
<span class="up"> ▲</span></a>
<ul class="submenu">
<li><a href="#">Перечень необходимых документов</a></li>
</ul>
</li>
<li class="nav-link"><a href="/images/page/01.jpg">Обучение
<span class="down"> ▼</span>
<span class="up"> ▲</span></a>
<ul class="submenu">
<li><a href="#">Бакалавриат</a></li>
<li><a href="#">Колледж</a></li>
<li><a href="#">Курсы</a></li>
</ul>
</li>
<li class="nav-link"><a href="/images/page/n1.jpg">Новости</a></li>
<li class="nav-link"><a href="/images/page/o1.jpg">О нас</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
Так вот на эту шапку нужно подключить поиск по сайту, с небольшим отступом от текста(около 20px), ну вот никак не получается, либо он вниз скатывается, либо еще куда. И заранее извиняюсь, если у вас кровь из глазу от такого кода, только 3 дня назад начал учиться верстать сайты. Конечный результат должен быть таким:

Ответы (1 шт):
Автор решения: Константин
→ Ссылка
Если просто добавить в таком виде:
<div class="searh">
<input type="text" placeholder="поиск" name="">
</div>
Сразу за закрывающим тегом /nav, то получится искомый результат, дальше играйтесь центровкой и padding/margin для достижения требуемых отступов