Bootstrap Responsive Drop Down Navigation

Now a days everybody want his/her site to make fully responsive even navigation menus too. Why ? Very simple! Because it delivers your content to all kind of viewers desktop/tablets/mobile/iphone. 

So how to make them responsive? Ya, there are several solutions/frameworks available, most popular is bootstrap frontend framework(personaly I prefer it most). What's the bootstrap? Bootstrap is a framework based on 12 grid system originaly developed by @mdo and @fat in Twitter. 

Ok i'll  explain how to make a responsive navigation menu by a simple example. 

Put these between head tags to make it responsive.

Now html part

<div class="navbar navbar-inverse"> 
   <div class="navbar-inner">  
   <div class="container">   
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
        <span class="icon-bar"> </span>
        <span class="icon-bar"> </span>
        <span class="icon-bar"> </span>
      </a>   
   <a href="https://www.cruzersoftwares.com/myexpense/" class="brand"> Expense Manager</a>
   
    <div class="nav-collapse collapse navbar-inverse-collapse">  
    <ul class="nav ">   
     <li class="dropdown "> 
 <a href="users" class="dropdown-toggle" data-toggle="dropdown"> Users 
<i class="caret"> </i> </a>
      <ul class="dropdown-menu mydropdown">   
       <li> <a href="users/add" class="linkmain"> Add Users </a> </li>
       <li> <a href="users/" class="linkmain"> Manage Users </a> </li>
      </ul>  
     </li>
     <li class="dropdown ">
<a href="users" class="dropdown-toggle" data-toggle="dropdown"> 
Users <i class="caret"> </i> </a>
      <ul class="dropdown-menu mydropdown">   
       <li> <a href="users/add" class="linkmain"> Add Notes </a> </li>
       <li> <a href="users/" class="linkmain"> Manage Notes </a> </li>
      </ul> 
     </li>
    </ul>  
    <ul class="nav pull-right">   
     <li class="active"> 
<a href="users/login"> Login to add your expense </a></li>
    </ul>   
   </div>
        </div> 
    </div>
 </div>

Now your navigation is ready.

Check demo at  myExpense.