0

Есть следующий код:

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">	&#9660;</span>
			  	<span class="up">	&#9650;</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">	&#9660;</span>
			  	<span class="up">	&#9650;</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
  • Покажите какого результата хотите добиться. Поиск по сайту - это input. Вы же имеете ввиду меню?
    – Denis640Kb
    12 фев 2020 в 17:09

1 ответ 1

1

Если просто добавить в таком виде:

         <div class="searh">
            <input type="text" placeholder="поиск" name="">
         </div>

Сразу за закрывающим тегом /nav, то получится искомый результат, дальше играйтесь центровкой и padding/margin для достижения требуемых отступовпример внешнего вида

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.