Simple Page Menu Responisve With Search Box

by dibalik seo

HTML

<div class="page_menu_wrapper">
<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
 <ul>
   <li><a href='/' itemprop='url' expr:title='data:blog.title'><img alt='logo blog' class='image-logo' height='30' src='URL LOGO BLOG' expr:title='data:blog.title' width='171'/></a></li>
   <li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
   <li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
   <li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
   <li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
   <li><a href='#' itemprop='url' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a></li>
   <li><a href='#' itemprop='url' title='Terms of Service'><span itemprop='name'>TOS</span></a></li>
    </ul>  
    <div class='clear'></div>
</nav>
<div class='sos-profil'>
<ul>
  <li><a href='https://www.facebook.com/username' title='Facebook'><i class='fa fa-facebook fa-lg'></i></a></li>
    <li><a href='https://twitter.com/username' title='Twitter'><i class='fa fa-twitter fa-lg'></i></a></li>
  <li><a href='https://www.google.com/+username' title='Google+'><i class='fa fa-google-plus fa-lg'></i></a></li>
  <li><a href='//id.linkedin.com/in/username' title='LinkedIn'><i class='fa fa-linkedin fa-lg'></i></a></li>
  <li><a href='http://www.youtube.com/c/username' title='Youtube'><i class='fa fa-youtube fa-lg'></i></a></li>
  <li><a href='http://www.blogger.com/follow-blog.g?blogID=920672884281913xxxx' title='Follow Blog'><i class='fa fa-plus-square fa-lg'></i></a></li>
  </ul>
  </div>
    <div class='clear'></div>
</div>

CSS

.page_menu_wrapper{width:100%;max-width:1100px;margin:0 auto}
.clear{clear:both}
.page-menu ul li,.sos-profil ul{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}
.sos-profil{float:right;margin:0}
.sos-profil li{float:left;display:inline-block;margin-left:10px}
.sos-profil a{color:#666;font-weight:500}
.sos-profil a:hover{color:#e8554e!important}
@media screen and (max-width:800px){.page-menu,.sos-profil{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,.sos-profil{text-align:center}
.page-menu ul li a{margin:0 auto;padding:0}
.sos-profil ul{width:auto;display:inline-block;float:none;margin:0 auto;padding:0!important}
.sos-profil li{margin:0 10px}
.sos-profil{margin-top: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%}
.sos-profil li{margin:0 5px}
}