Bootstrap navbar: Width of left element affects position of element in the center

Question

I'm new to bootstrap 3. At the moment I want to allign my navbar to the center. I did this with this approach, which works fine.
Now my Problem is that the width of my navbar-brand element affects the position of the centered stuff,e.g. the elements are moving to the left, if the branding gets bigger. Is there a way to position a element of the navbar at the "real" center of the screen?
It looks like that at the moment: But I want at the real center of the screen like that, but with the brand:

My html:

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand navbar-left" href="#"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Stuff</a></li>
              </ul>
            </li>
            <li><a href="#about">Karriere</a></li>
            <li><a href="#contact">Über uns</a></li>
            <li><a href="#contact">Kontakt</a></li>             
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

My CSS:

@media (min-width: $grid-float-breakpoint) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

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

Thanks for your help!

This is a good question. This is [also an issue in Bootstrap 4](http://stackoverflow.com/questions/42539701/center-navbar-links-without-brand-logo-pushing-it-to-the-right-in-bootstrap-4/42540052) because of the way flexbox centering works. — Carol Skelly, Apr 15 '17 at 15:13

score 1 · Accepted Answer · answered Apr 15 '17 at 14:38

1

Making the root element of the navbarbrand have an absolute position seems to give the desired effect. This causes your nav links to be centered without regard to the navbarbrand element. NOTE: If your 'brand' text length gets too long, it will overlap the nav links. https://jsbin.com/juyanijeku/edit?output

.navbar-header {
  position: absolute;
}

answered Apr 15 '17 at 14:38

pbarrasso

156
3

This works exactly like I wanted. Thank you very much! – Alexander Pilz Apr 15 '17 at 14:57

score 0 · Answer 2 · answered Apr 15 '17 at 14:51

I've tried something like this

a.navbar-brand {
  display: block;
  float: none;
  text-align: center !important;  
}

.nav> li {
 display:inline-block !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header text-center">
         
          <a class="navbar-brand" href="#">
          Brand
          </a>
        </div>
        <div id="navbar">
          <ul class="nav navbar-nav text-center">
            
            <li><a href="#about">Karriere</a></li>
            <li><a href="#contact">Über uns</a></li>
            <li><a href="#contact">Kontakt</a></li>             
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Bootstrap navbar: Width of left element affects position of element in the center

2 Answers2