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!