Well, I think bootstrap is the best framework to make your header menu responsive. Its easy and smooth.  Usually when you use twitter bootstrap, you always use following files:

bootstrap.css

bootstrap-resposive.css

jquery-(version).js

bootstrap.js

 

Thats all, you need to make your menu responsive. The only thing that you need to do it writing the proper mark-up which is very standard.

I am providing some sample mark-up which should work with the above files:

<div class=”row-fluid”>
<div class=”navbar navbar-inverse”>
<div class=”navbar-inner”>
<div class=”container-fluid”>
<a  class=”btn btn-navbar” data-toggle=”collapse” data-target=”.nav-collapse”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</a>
<div class=”nav-collapse collapse”>
<ul class=”nav”>

<li class=”active”><a href=”#”><i class=”icon-home icon-white”></i></a>Link1</li>

<li><a href=”#”>Link2</a></li>

<li><a href=”#”>Link3</a></li>

<li><a href=”#”>Link4</a></li>

</ul>

</div><!– /.nav-collapse –>
</div><!– /.container –>
</div><!– /.navbar-inner –>
</div><!– /.navbar –>

 

Thats it! It should work fine!

Leave a Reply

Your email address will not be published. Required fields are marked *