Two Navs with Bootstrap framework

Readme

The two navs are seperated by id s #first & #second. in the index.html file
The btn btn-navbar is styled with font-awesome iconic font. So it is styled in the responsive.css

index.html

<div class="span8 nav-wrapper">
                    
                     
                     <div class="top-nav " >
                     
                      
                     
                       <div class="navbar span8" >
                     
                     <a class="btn btn-navbar" data-toggle="collapse" data-target="#first">
                    <span class="fa fa-bars"></span>
                    
				   </a>
                   <div id="first" class="nav-collapse collapse" >
                      <ul class="navigation-top">
                      <li><a href="">Home</a></li>
                      <li><a href="">About</a></li>
                      <li><a href="">Hamlet</a></li>
                      
                      
                      </ul>
                     
                     </div> <!-----/nav-collapse-------------------->
                     </div> <!-----/navbar-------------->
                     
                   
                     
                     <div class="span4 search-wrapper " >
                        
                        <div class="search-box ">---Search in the Site----
                        
                        </div><!--/search-box------------->
                        <div class="search-button-placeholder "><i class="fa fa-search"></i> 
                        
                        </div><!-----/earch-button-placeholder----------------->
                     
                       
                     </div><!------/search-wrapper--------------->
                     
                     </div> <!----/top-nav--------------->
                       <div class="clearfix"></div>
                       <!--------MAIN NAVS--------------------->
                 
                 
                  
                  
                  <div class="main-nav-wrapper">
                  
                   <div class="span12">
                  <div class="navbar">
                     
                     <a class="btn btn-navbar" data-toggle="collapse" data-target="#second">
                    <span class="fa fa-bars"></span>
				   </a>
                   <div id="second" class="nav-collapse collapse" >
                      <ul class="main-menu">
                      <li><a href="">Home</a></li>
                      <li><a href="">About</a></li>
                      <li><a href="">Hamlet</a></li>
                      <li><a href="">Hamlet</a></li>
                      <li><a href="">Hamlet</a></li>
                      <li><a href="">Hamlet</a></li>
                      <li><a href="">Hamlet</a></li>
                      <li><a href="">Hamlet</a></li>
                      <li><a href="">Hamlet</a></li>
                      <li><a href="">Hamlet</a></li>
                      
                      
                      </ul>
                     
                     </div> <!-----/nav-collapse------------------>
                     </div> <!----/navbar--------------------->
                     </div><!-------/span12------------------>
                     
                     
                     
                     
                     </div><!--/main-nav-wrapper--------------->
                  
                 
                    
                    </div><!-----/nav-wrapper------------>

main.css

/******Navigations*********/
 
     .nav-wrapper
	 {
		height:auto;
		background:transparent#0C6;
		margin:0 !important;
		padding:0 ;
		padding-bottom:1.563em;
		
		 }
		 
	 .nav-wrapper .top-nav
	{
		height:40px;
		padding: 0;
		background:#0086cb;
		display:block;
		
		margin:0 0 5% 0 ;
		}
		
	.nav-wrapper .top-nav .navigation-top
	{
		margin:0;
		padding:0;
		list-style:none;
		font-family: 'Archivo Narrow', sans-serif;
		font-size:1.063em;
		padding:0 0 0 0;
		height:40px;
		
		
		}
		
	 .navigation-top > li
	{
		
		 float:left;
		 *display:inline;
		 display:inline-block;
		 padding:0.750em;
		
		}
		
	
	.navigation-top > li > a
	
	{
		color:#fff !important;
		}
		
		
 /****** Search Box*******/
 
   .search-wrapper
   {
	   background:#016ca4;
	   height:40px;
	   
	   
	   }
 
  .search-wrapper .search-box
  {
	  width:78%;
	  float:left;
	  background:transparent#9C0;
	  display:block;
	  height:40px;
	  padding:10px;
	  color:#fff;
	  }
	  
	  
	 .search-wrapper .search-button-placeholder
	 {
		 width:20%;
		 background:transparent#C06;
		 float:right;
		 height:40px;
		 padding-top:10px;
		 text-align:center;
		 color:#fff;
		 font-size:15px;
		 } 
		 
		 
/********************MAin- Nav**************************/

    .nav-wrapper .main-nav-wrapper
	 {
		background: transparent#F30;
		height:auto;	
		margin:0;
	    padding:0 ;
		
	   
			
	    }

   
   .main-nav-wrapper .main-menu
   {
	   
	   
	   list-style:none;
	   margin:0;
	   padding:0;
	   
	   
	   }
   

 .main-menu > li
 {
	 padding:  0.750em;
	 float:left;
	 display:inline-block;
	 *display:inline;
	 
	 
	 }

 .main-menu > li:first-child
 {
	 background:#0086cb;}
	 
	 .main-menu > li:first-child a
	 {
		 color:#fff !important;
		 
		 }

 .main-menu > li > a
 
 {
	 
	 font-family: 'Archivo Narrow', sans-serif;
	 color: #1a1512 !important;
	 display:block;
	 text-transform:uppercase;
	 font-weight:bold;
	 letter-spacing:1px;
	 
	 }

responsive.css

.navbar .btn
  {
	  border:none !important;
	  
	  }
  
  .navbar .btn-navbar
  
  {
	  background:none !important;
	  background-color:none !important;
	  *background-color : none !important;
	  background-image: none !important;
	  border-color: none !important;
	  -moz-box-shadow: none !important;
	  -webkit-box-shadow: none !important;
	   box-shadow: none !important;
	   text-shadow: none !important;
	   font-size:24px;
	  
	  }
  
  .navigation-top > li
  {
	  clear:both;
	  display:block;
	  background:#016ca4;
	  min-width:100%;
	  margin-bottom:2px;
	  
	  }
  
  .navigation-top > li > a
  {
	  width:100%;
	  background:transparent#000;
	  display:block;}
  
  .nav-wrapper .top-nav
  {
	  height:100%;
	  
	  }
  .main-nav-wrapper .btn-navbar
  {
	  
	  color:#000 !important;
	  
	  }
  
  
  .main-menu > li 
  {
	 clear:both;
	 display:block;
	 width:100%;
	 
	  }
.main-menu > li:first-child
{
	width:100%;} 
	
	
 .main-menu > li > a
 {
	 display:block;
	 min-width:100%;
	 background:transparent#0F0;}