Горизонтальное адаптивное меню с поиском и мини профилем от waaka

<header>
<div class="header">
  <div class="max_width">
  <ul>
  <ul class="mob_menu_head"><li><a href="javascript://"><i class="fa fa-bars" aria-hidden="true"></i></a></li></ul>

   
  <?if($USER_LOGGED_IN$)?>  
  <?if($UNREAD_PM$="0")?> <?else?>
  <li class="ls_user_head activ_head"><a href="$PM_URL$"><i class="fa fa-bell" aria-hidden="true"></i><b>$UNREAD_PM$</b></a></li>
  <?endif?>

  <li class="user_prof_head">
  <a href="javascript://">
  <?if($USER_AVATAR_URL$)?>
  <img src="$USER_AVATAR_URL$">
  <?else?>
  <img src="http://talantlev.ucoz.ru/img/ava_none.png">
  <?endif?>
  </a>
   
   
  <ul class="header_dop_ul">
  <?if($USER_LOGGED_IN$)?>
<li><a href="/index/8-$USER_ID$">Профиль</a></li>
  <li><a href="$PM_URL$">Сообщеня</a></li>
  <li><a href="/index/11">Настройки</a></li>
  <li><a href="$LOGOUT_LINK$">Выход</a></li>
  <?else?>
  <?endif?>  
   
  </ul>  
  </li>
  <?else?><?endif?>  
   
   
   
  <li class="logo_head"><a href="/"><?if($USER_LOGGED_IN$)?><?else?>Я<?endif?><i class="fa fa-heart" aria-hidden="true"></i> Ростов!</a></li>

   
   
  <span class="head_prof_bc">
  <?if($USER_LOGGED_IN$)?>  
  <?else?>  
  <li class="ls_user_head activ_head"><a href="#"><i class="fa fa-bell" aria-hidden="true"></i><b>1</b></a>
   
  <ul class="header_dop_ul" style="right:0;">
  <?if($USER_LOGGED_IN$)?>
  <?else?>

  <li><a href="$LOGIN_LINK$"><h3>РЕГИСТРАЦИЯ</h3></a></li>
  <li><a href="$LOGIN_LINK$"><h3>ВХОД</h3></a></li>
   
  <?endif?>  
   
  </ul>  
   
  </li>  
  <?endif?>  
   
   
  <?if($USER_LOGGED_IN$)?> <li class="user_head_name_prof"><a href="/index/8-$USER_ID$">ПРОФИЛЬ</a></li>
  <li class="user_head_name_prof"><a href="/index/11">НАСТРОЙКИ</a></li>
  <li class="user_head_name_prof"><a href="$LOGOUT_LINK$">ВЫХОД</a></li>
  <?else?>

  <li class="user_head_name_prof"><a href="$LOGIN_LINK$"><h3>РЕГИСТРАЦИЯ</h3></a></li>
  <li class="user_head_name_prof"><a href="$LOGIN_LINK$"><h3>ВХОД</h3></a></li>
   
  <?endif?>  
  </span>
   
   
  <span class="head_menu">
  <li><a href="" ><h3>Новости</h3></a></li>

  <li class="ob_head">
  <a href=""><h3>Объявления</h3> <b>+3</b> </a>
  <ul class="header_dop_ul">
  <li><a href=""><h3>ВСЕ ОБЪЯВЛЕНИЯ</h3></a></li>
  <li><a href=""><h3>ПОДАТЬ ОБЪЯВЛЕНИЕ</h3></a></li>
  <li><a href=""><h3>НЕДВИЖИМОСТЬ</h3></a></li>
  <li><a href=""><h3>ТРАНСПОРТ</h3></a></li>
  <li><a href=""><h3>РАБОТА</h3></a></li>
  <li><a href=""><h3>УСЛУГИ</h3></a></li>
  </ul>
  </li>
  <li class="dop_menu_head">
  <a href="javascript://">Ещё <i class="fa fa-caret-down icon_color" aria-hidden="true"></i></a>
  <ul class="header_dop_ul">
  <li><a href=""><h3>Видео</h3></a></li>
  <li><a href=""><h3>Фото</h3></a></li>
  <li><a href=""><h3>О ГОРОДЕ</h3></a></li>
  <li><a href=""><h3>РАСПИСАНИЕ ТРАНСПОРТА</h3></a></li>
  <li><a href=""><h3>ПОИСК ПОПУТЧИКОВ</h3></a></li>
  </ul>
  </li>
   
  </span>

<li class="search_head"><a href="javascript://"><i class="fa fa-search" aria-hidden="true"></i></a></li>
  <dir id="clr"></dir>
  </ul>
  </div>
</div>
</header>

<div class="serch_form">
  <form action="/search/">
  <input class="search_submit" type="image" src="/img/search.png">
  <input class="search_text" name="q" type="text" placeholder="Что будем искать?" autofocus>
  </form>
  </div>

#clr{clear:both}
.max_width {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.header {
  background: #4A76A8;
  border-bottom: 1px solid #31537A;
  position: relative;
  z-index: 1000;
  width: 100%;
}
.header ul {list-style: none;}
.header ul li {
  float: left;
  position: relative;
}
.header ul li a {
  display: block;
  color: #FFF;
  font-size: 13px;
  line-height: 50px;
  padding: 0 15px;
  position: relative;
  transition: .6s;
  text-decoration: none;
}

.mob_menu_head {
  display: none;
}

.header ul li a h3 {
  padding: 0!important;
  font-size: 13px;
  font-weight: 300;
  display: inline-block;
  margin: 0px;
}

.header ul li a i {
  margin: 0 10px;
}
.header ul li:hover a{
  background: #3D699B;
}

.head_prof_bc {
  float: right;
}

.ls_user_head i {
  color: #1B3D64;
  font-size: 18px;
  margin: 0!important;
  transition: .6s;
}
.ls_user_head:hover i {
  color: #FFF;
}

.ls_user_head a b {
  position: absolute;
  top: 7px;
  right: 10px;
  background: #FF370F;
  display: block;
  border-radius: 50%;
  text-align: center;
  padding: 2px 5px;
  line-height: 12px;
  font-size: 9px;
}

.user_prof_head a {
  width: 50px;
  height: 50px;
  overflow: hidden;
  padding: 0!important;
  background: #31537A;
  transition: .6s;
}
   
.user_prof_head img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.user_head_name_prof {display: none;}

.logo_head a {
  font-size: 18px!important;
  font-family: Arial,Tahoma,sans-serif;
  font-weight: 100;
  padding-right: 30px!important;
  background: #3D699B;
}
.logo_head a i {
  color: #FF370F;
  font-size: 18px;
  margin: 0 10px;
  text-shadow: 0 0 30px rgba(255,55,15,.5);
}

.statik_user_siti a {font-size: 14px!important;}
.statik_user_siti i {margin: 0 10px;}

.ob_head {position: relative;}
.ob_head b {
  background: #31537A;
  font-size: 9px;
  color: #FFF;
  padding: 2px 9px;
  border-radius: 20px;
  margin-top: -6px;
  display: inline-block;
  height: 20px;
  line-height: 18px;
}

.dop_menu_head i {
  color: #1B3D64;
  transition: .6s;
}
.dop_menu_head:hover i {color: #FFF;}

.header ul li .header_dop_ul {
  position: absolute;
   
  z-index: 2;
  background: rgba(61,105,155,.8);
  padding:10px 0;
  width: 100%;
  min-width: 200px;
  display: none;
  box-shadow: 0 0 30px rgba(61,105,155,.7);
}

.header ul li .header_dop_ul li {
  float: none;
}

.user_prof_head .header_dop_ul li a {
  width: 100%;
  height: auto;
  padding: 0 10px!important;
}

.user_prof_head .header_dop_ul li:hover a{
  box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.header_dop_ul li:hover a{
  box-shadow: 0 0 5px rgba(0,0,0,.2);
}

.header ul li .header_dop_ul li a, .header ul li .header_dop_ul li a h3 {
  line-height: 30px;
  font-size: 12px;
  padding: 0 20px!important;
  background: none;
  font-weight: 300;
  border: none;
  width: 100%;
}

.header ul li .header_dop_ul li a h3 {
  padding: 0!important;
}

.header ul li .header_dop_ul li:hover {
  background: #3D699B;
}

.header ul li:hover .header_dop_ul {
  display: block;
  animation-name: slideUp;
  -webkit-animation-name: slideUp;  
   
  animation-duration: 1s;  
  -webkit-animation-duration: 1s;
   
  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;
   
  visibility: visible !important;  
}

@-webkit-keyframes slideUp {
  0% {
  transform: translateY(100%);
  }
  50%{
  transform: translateY(-8%);
  }
  65%{
  transform: translateY(4%);
  }
  80%{
  transform: translateY(-4%);
  }
  95%{
  transform: translateY(2%);
  }  
  100% {
  transform: translateY(0%);
  }  
}

.activ_head {
  background: #3D699B;
}

.activ_head a i {
  color: #FFF;

  animation-name: pulse;
  -webkit-animation-name: pulse;  
   
  animation-duration: 1.5s;  
  -webkit-animation-duration: 1.5s;
   
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
   
@keyframes pulse {
  0% {
  transform: scale(0.9);
  opacity: 0.7;  
  }
  50% {
  transform: scale(1);
  opacity: 1;  
  }  
  100% {
  transform: scale(0.9);
  opacity: 0.7;  
  }  
}
   
@-webkit-keyframes pulse {
  0% {
  -webkit-transform: scale(0.95);
  opacity: 0.7;  
  }
  50% {
  -webkit-transform: scale(1);
  opacity: 1;  
  }  
  100% {
  -webkit-transform: scale(0.95);
  opacity: 0.7;  
  }  
}

.search_head {
  font-size: 20px;
   
}

.search_head_activ {background: #31537A;}

.serch_form {
  padding: 0 10px;
  position: relative;
  background: #31537A;
  display: none;
  z-index:11111;
}
.search_text {
  padding: 10px 15px;
  margin: 8px 0;
  background: #31537a;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  color: #FFF;
  padding-right: 35px;
  width: 100%;
}

.search_text::placeholder {color: #86A1BF;font-size: 14px;}

.search_submit {
  position: absolute;
  right: 22px;
  top: 18px;
}

.dop_serch_form {display: block;}

   

@media screen and (max-width: 900px) {
.head_menu {display: none;}
.mob_menu_head {display: block;}
.dop_head_menu {display: block;position: absolute;left: 0;width: 300px;min-height: 100vh;z-index: 999;background: #4A76A8;top: 50px;}
.dop_head_menu li {float: none!important;display: block;}
.dop_head_menu li a {display: block;}
.dop_head_menu li .header_dop_ul {display: block!important;position: relative!important;box-shadow: none!important;}
.header ul li:hover .header_dop_ul { animation-duration: 0s; -webkit-animation-duration: 0s;}
}

@media screen and (max-width: 600px) {
  .head_prof_bc {display: none;}
  .head_prof_bc_dop {
  display: block;
  float: none;
  position: absolute;
  left: 0;
  top: 50px;
  z-index: 1000;
  width: 300px;
  background: #31537a;
  }
  .user_prof_head .header_dop_ul {display: none!important;}
.ls_user_head .header_dop_ul {display: none!important;}
  .dop_head_menu {top: 100px;}
  .user_head_name_prof {display: block;}
  .search_head {float: right!important;}
}

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

<script>
$(document).ready(function(){
$(".mob_menu_head").click(function(){
$(".head_menu").toggleClass("dop_head_menu");
$(".head_prof_bc").toggleClass("head_prof_bc_dop");
});
   
});
</script>
<script>
$(document).ready(function(){
$(".search_head").click(function(){
$(".serch_form").toggleClass("dop_serch_form");
$(".search_head").toggleClass("search_head_activ");
});
   
});
</script>