Center menu items in navbar responsive

Question

I am a bootstrap beginner. I want to build a template , where I have six menu with a brand logo. The logo positioned exactly at the middle of the menu structure. Out of 6 menu, 3 menu posituoned to its right and other 3 menu positioned to left. Like this :

I have followed general mark up structure for menu , declared in documentation of Twitter bootstrap.

For tablet screen(col-sm-) , my menu structure should cover complete 12 grids. Screen resolution i.e higher than tablet i.e col-md and col-lg in bootstrap language , should only cover 11 grid with offset of 1.

I have added my mark up accordingly.[ Line No 6 in Html tab].

My Problem:

1. In large screen resolution , it looks good. Bt at certain resolution, mostly below 1024 pixel, Some menu just come to next line as they dont behave responsivly.(Just resize the js fiddle result window of my js fiddle link to know the problem. Ihave shared my js fiddle logo below) This is what my problem it.

   My all menu logo and brand logo and the text ,all should go responsive when i change my viewport to smaller screen(Upto tablet screen). Can any one help me in making the text , menu logo and the brand logo , responsive?? I have added img-responsive class to brand logo , but seems like thats not working.

What I want:

My all menu with the brand , should stay in one line in all tablet screen and the screens having higher resolution than it.

For higher resolution screen, the menu should positioned center of the header section, hence should have at least 1 col offset value i.e col-md-offset-1. For tablet screen my column mark up should be col-sm-12 , no offset value. (Dont consider for -xs- screen. I dont have any problem for -xs- screens)

My JS fIDDLE LINK:http://jsfiddle.net/swapnaranjita_nayak/7bHfJ/

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default menu" role="navigation">
    <div class="container">
        <div class="row">
            <div class="col-md-11 col-md-offset-1 col-sm-12 col-sm-offset-0 text-center">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">


     <button type="button" class="navbar-toggle" data-toggle="collapse"      data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

                </button>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav ">
                        <!-- 1st Menu -->
                        <li> <a href="http://imgur.com/WepWP6j" class="text-center"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu 1</li>
                        <!-- 2nd Menu -->
                        <li> <a href="http://imgur.com/WepWP6j"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu2</li>
                        <!-- 3rd Menu -->
                        <li> <a href="http://imgur.com/WepWP6j"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu 3</li>
                        <!-- Middle Navigation Link logo -->
                        <li class="hidden-xs"><a class="navbar-brand img-responsive" href="http://imgur.com/D6RHfjf"><img src="http://i.imgur.com/D6RHfjf.png" title="Hosted by imgur.com" /></a>
                        </li>
                        <!-- 4th Menu -->
                        <li> <a href="http://imgur.com/WepWP6j"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu 4</li>
                        <!-- 5th Menu -->
                        <li> <a href="http://imgur.com/WepWP6j"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu 5</li>
                        <!-- 6th Menu -->
                        <li> <a href="http://imgur.com/WepWP6j"><img src="http://i.imgur.com/WepWP6j.png" title="Hosted by imgur.com" /></a> Menu 6</li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <!-- /.navbar-collapse -->
            </div>
        </div>
        <!-- row -->
    </div>
    <!-- /.container-fluid -->
</nav>

css

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

Answer 1

Add this few lines of CSS to get your menu links to be centered:

/* float:none is important to center the elements */
.navbar-header{
float: none;
display: inline-block;
}

/* this is needed so that the toggle button remains on the right */
button.navbar-toggle{
position: absolute;
right: 5px;
top: 0;
}

/* much of your menu links go to the next line because of the padding space */
.navbar-collapse{
    padding-right: 0px;
    padding-left:0px;
}

/* again, reducing the padding space */
.nav>li>a {
    padding: 10px 10px;
}

/* this is to remove the vertical scrollbar when the viewport is smaller */
.collapse.in{
display: inline;
}

Also remove the .container div as it puts in padding space, you should probably remove the col-*-offset-* too.

Here's a demo(jsfiddle) of how it looks with the above changes.