I am working on a bootstrap project and I have to create a navigation menu [like this](http://i.imgur.com/ZUTPs8x.png):

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;

}

```