响应式导航菜单引导

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; 
}