Responsive navigation menu bootstrap - html

Question

I am working on a bootstrap project and I have to create a navigation menu like this:
I used absolute position for it but it is not responsive when I scale it to smaller resolution (it becomes too small when I scale down). Is there any method to make a responsive navigation menu (like the image above)?
Here's my source:
<div id ="top" class="container">
<div class="top-menu row">
<ul class="top-menu-buttons col-lg-12 col-xs-12">
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-active">
<img class="img-responsive" src="img/home-bt-enable.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/deal-bt.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/about-bt.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/contact-bt.png">
</a>
</li>
</ul>
</div>
</div>
CSS:
.top-menu ul,
.top-menu li{
display: inline-block;
}
.top-menu{
padding-left: 170px;
padding-right: 170px;
padding-bottom: 0;
bottom: 0;
top:auto;
}
.top-menu-button{
display: inline-block;
position: absolute;
width: 100%;
}
.menu-bt-active{
top: 22px;
}
.menu-bt-inactive{
top: 37px;
}

Answer 1

<div class="nav navbar-default navbar-static-top">
<div class="container-fluid">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeadCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand collapse navbar-collapse navHeadCollapse">
<a href="#">
<img id="img_navbar" src="img/home-bt-enable.png">
</a>
<a href="#">
<img id="img_navbar" src="img/deal-bt.png">
</a>
<a href="#">
<img id="img_navbar" src="img/about-bt.png">
</a>
<a href="#">
<img id="img_navbar" src="img/contact-bt.png">
</a>
<div id="search"class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>

Answer 2

Try this CSS
#img_navbar
{
margin-left: 3%;
float: left;
margin-bottom: 10;
width:3%;
height:3%;
}
#search
{
width:20%;float:right;
}