5

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 ?

Community
  • 1
  • 1
trante
  • 33,518
  • 47
  • 192
  • 272
  • could you please remove all those inline styles and write separate CSS? (it's a bit a mess like this to see what you've got) – caramba May 05 '14 at 13:18
  • @caramba I removed inline styles and updated fiddle. – trante May 05 '14 at 13:36
  • "something1" and "something2" has also to be centered or always to be same line but on the right side of screen? – caramba May 05 '14 at 13:41

4 Answers4

3

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

Bartłomiej Semańczyk
  • 59,234
  • 49
  • 233
  • 358
  • Well it seems like this works for big screens, `navbar-header navbar-collapse.collapse` breaks collapsing for small screens. – trante May 06 '14 at 10:58
1

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;
}
caramba
  • 21,963
  • 19
  • 86
  • 127
1

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.

AyB
  • 11,609
  • 4
  • 32
  • 47
  • It seems like this doesn't work for small screens. It works for 1350px+ – trante May 06 '14 at 11:03
  • @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.](http://quirktools.com/screenfly/#u=http%3A//jsfiddle.net/99CRu/1/embedded/result&w=320&h=568&a=37) – AyB May 06 '14 at 11:15
  • 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 :) – trante May 08 '14 at 20:48
1

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!

Andrew Matthew
  • 432
  • 1
  • 5
  • 15