Centering fixed top navbar for large screens in Twitter Bootstrap 3

Question

I have a fixed top navbar in Twitter Bootstrap 3.
Everything works good until 1350px. After 1350px there becomes a gap between navbar contents. So I want to center my navbar.

I checked answers on this, this and this. None of them worked for me.

This is my fiddle: http://jsfiddle.net/mcqHE/56/
Currently I use Navbar 1.
To try centering navbar, I added Navbar 2 to the fiddle.

Check fiddle in 1500px width.
* Navbar 1 is one line, not centered and has gap.
* Navbar 2 is centered, no gap, but it is two lined.
It seems like the cause is this rule: @media (min-width: 1200px) .container { max-width: 1170px; }

So how can I make navbar centered, and one line if width is bigger than 1350px ?

Answer 1

This is an aswer for your problem:-)

You need to add follow lines to css:

@media screen and (min-width:  1350px) {
   .navbar { text-align: center; }
   .navbar-header { display: inline-block; float: none !important; }
   .navbar-collapse.collapse { display: inline-block !important; }
}

Here is solution on: http://jsfiddle.net/myN2s/ .

Let me know if you solve this.

Everytime when you want to center elements, you need to add text-align:center to the parent element, and display: inline-block to elements which you want to center horizontally. None of these can be floated (this is very important).

Answer 2

This fix wil affect all styles on your page. But I guess it is what you are asking for, there was not enough space to put in on one line. http://jsfiddle.net/mcqHE/58/

* {
    font-size:10px;
}