Rectangle 27 0

css Centering fixed top navbar for large screens in Twitter Bootstrap 3?


* {
    font-size:10px;
}

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/

Note
Rectangle 27 0

css Centering fixed top navbar for large screens in Twitter Bootstrap 3?


.collapse.navbar-collapse.in{ display: inline-block !important; }
.navbar-header { float: none; }
.navbar-inner { text-align: center; }

1) Yes, it's the width that's creating the two-gaps but the major culprit is the .container. So remove the <div> with the class .container

@trante Understood what you meant, the css selector was targeting the navbar collapse both on open and close, made the change and this is how it looks.

Although the below answer covered most of it, I noticed the menus are still not in one-line, here are the following change I've made:

And it's effect on a resolution > 1350px.

Binds the two <ul> elements together.

If you want the heading 'Navbar' to be centered too, you can do:

Well, I don't prefer to "Navbar" text to be centered. Because in that case a new line appears, and it makes navbar height bigger :)

Note
Rectangle 27 0

css Centering fixed top navbar for large screens in Twitter Bootstrap 3?


.collapse.navbar-collapse.in{ display: inline-block !important; }
.navbar-header { float: none; }
.navbar-inner { text-align: center; }

1) Yes, it's the width that's creating the two-gaps but the major culprit is the .container. So remove the <div> with the class .container

@trante Understood what you meant, the css selector was targeting the navbar collapse both on open and close, made the change and this is how it looks.

Although the below answer covered most of it, I noticed the menus are still not in one-line, here are the following change I've made:

And it's effect on a resolution > 1350px.

Binds the two <ul> elements together.

If you want the heading 'Navbar' to be centered too, you can do:

Well, I don't prefer to "Navbar" text to be centered. Because in that case a new line appears, and it makes navbar height bigger :)

Note
Rectangle 27 0

css Centering fixed top navbar for large screens in Twitter Bootstrap 3?


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

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).

Well it seems like this works for big screens, navbar-header navbar-collapse.collapse breaks collapsing for small screens.

Note
Rectangle 27 0

css Centering fixed top navbar for large screens in Twitter Bootstrap 3?


* {
    font-size:10px;
}

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/

Note
Rectangle 27 0

css Centering fixed top navbar for large screens in Twitter Bootstrap 3?


max-width: 1350px;
margin-left: auto;
margin-right: auto;

I think this is what you're after? if not sorry!

for navbar 1 add the following css to this div div class="navbar-collapse navbar-part2 collapse

max width will make sure the nav part wont go wider than 1350px margin-left:auto and margin-right:auto will center the nav.

Note
Rectangle 27 0

css Centering fixed top navbar for large screens in Twitter Bootstrap 3?


max-width: 1350px;
margin-left: auto;
margin-right: auto;

I think this is what you're after? if not sorry!

for navbar 1 add the following css to this div div class="navbar-collapse navbar-part2 collapse

max width will make sure the nav part wont go wider than 1350px margin-left:auto and margin-right:auto will center the nav.

Note
Rectangle 27 0

css Centering fixed top navbar for large screens in Twitter Bootstrap 3?


* {
    font-size:10px;
}

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/

Note