CODEWITHSUNDEEP
csstwitter-bootstrapcentering
trante
trante

Reputation: 34006

Centering fixed top navbar for large screens in Twitter Bootstrap 3

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 ?

Upvotes: 5

Views: 1607

Answers (4)

Andrew Matthew
Andrew Matthew

Reputation: 432

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

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

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

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

Upvotes: 1

Bartłomiej Semańczyk
Bartłomiej Semańczyk

Reputation: 61794

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

Upvotes: 4

AyB
AyB

Reputation: 11665

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:

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

2) Add this CSS to keep your menu items centered:

.navbar-inner { text-align: center; }

3) Lastly this:

.collapse.navbar-collapse.in{ display: inline-block !important; }

Binds the two <ul> elements together.

Additional:

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

.navbar-header { float: none; }

Here's the JSFiddle.

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

Upvotes: 1

caramba
caramba

Reputation: 22480

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

Upvotes: 1

Related Questions