CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3centering
D.M.
D.M.

Reputation: 23

How to Center Brand/Image in Navbar

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?

Upvotes: 2

Views: 11799

Answers (4)

Rachel S
Rachel S

Reputation: 3920

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>

Upvotes: 0

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

.navbar-brand{
margin:0 auto;
 left: 50%;
 position: relative;
transform: translateX(-50%);
}

Fiddle

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

Upvotes: 1

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

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

Upvotes: 0

SW4
SW4

Reputation: 71140

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

Upvotes: 5

Related Questions