Simple Page Menu Responisve With Search Box

by kompiajaib

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="page_menu_wrapper">
<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
 <ul>
   <li><a href='/' itemprop='url' title='KompiAjaib.com'><img alt='logo blog' class='image-logo' height='30'...

CSS

.page_menu_wrapper{width:100%;max-width:1100px;margin:0 auto;}
.clear{clear:both}
.page-menu ul li{list-style:none}
.page-menu ul li{display:inline-block;transition:all 400ms ease-in-out}
.page-menu{float:left;width:auto;height:auto;padding:0!important;margin:0 5px;font-size:100%;font-weight:400}
.page-menu ul{margin:0 auto!important;padding:0!important;line-height:3em}
.page-menu ul li a:hover{color:#e8554e!important}
.page-menu ul li a{color:#666!important;padding:0 20px 0 0;text-decoration:none}
.page-menu ul li a img{vertical-align:middle!important}
.search-box{width:300px;height:27px;float:right;padding:0;margin:8px 8px 1px 0;position:relative}
#searchform,#search-form,.search-button{border:none;line-height:27px}
#searchform{position:relative;border:1px solid #ddd}
#search-form{color:gray;width:100%;padding:0 10px 0 30px;height:27px;line-height:27px;font-size:14px;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.search-button{width:30px;padding:0;text-align:center;margin:0;top:0;left:0;font-size:16px;color:#888;background:none;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}
#search-form:focus,#search-form:hover,.search-button:focus,.search-button:hover{border:none;outline:0;color:#000}
@media screen and (max-width:800px){
.page-menu,.search-box{width:100%;margin:0}
.page-menu ul li{width:33.3%;float:left}
.page-menu ul li:first-child{width:100%;float:none;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;margin-top:10px}
.page-menu ul li,.search-box{text-align:center}
.page-menu ul li a{margin:0 auto;padding:0}
#search-box{width:96%;float:left;padding-right:0;padding-bottom:10px;margin:0 2%;}
.search-box{margin-top:10px}
#searchform{margin:0 10px}
.page_menu_wrapper{padding-bottom:10px}
}
@media screen and (max-width:480px){.page-menu ul{line-height:2em}
}
@media screen and (max-width:240px){
.page-menu ul li{width:50%}
}