2

I've been struggling all morning with this little thing. I try to center the .navbar-brand to be in the middle of the whole navigation bar with Bootstrap 3.

Could someone solve my mystery?

CODE:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <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" href="#"><img src="img/logo.png" alt=" "/></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="add/">Add your Channel</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
</nav>

A preview: GTA5CH.AT/twitch

I'd like the logo in the middle/center of the navbar, how to?

Tanner
  • 22,205
  • 9
  • 65
  • 83
D.M.
  • 23
  • 1
  • 1
  • 5
  • I don't know what achieves Bootstrap with jQuery, but you are getting this error message in the console: "Bootstrap's JavaScript requires jQuery" – Beto Aveiga Nov 20 '14 at 10:46

4 Answers4

5

Assuming you want to keep the menu options left aligned, you can accomplish this using the following:

.navbar-header{
   left: 50%;
   position: relative;
   transform: translateX(-50%);
}
SW4
  • 69,876
  • 20
  • 132
  • 137
1
.navbar-brand{
margin:0 auto;
 left: 50%;
 position: relative;
transform: translateX(-50%);
}

Fiddle

http://jsfiddle.net/DTcHh/2027/

Manjunath Siddappa
  • 2,126
  • 2
  • 21
  • 40
0

You can try below code:

.container-fluid
 {
   text-align: center;
   display: block;
 }
#navbar, .navbar-header{
  display: inline-block !important;
  float: none;
  margin-right:0 !important;
}
Pradeep Pansari
  • 1,287
  • 6
  • 10
0

I found this answer helpful: https://stackoverflow.com/a/17550180/4597784

Use this class instead of the navbar-brand class so you don't get unwanted styling:

.centered-navbar {position:absolute; left:25%; width:50%; text-align:center;}

And in the HTML:

<div class="centered-navbar"><a href="#"><img src="img/logo.gif" style="height:46px; width:196px;"></a></div>
Community
  • 1
  • 1
Rachel S
  • 3,780
  • 3
  • 24
  • 37