Image on bootstrap navbar to stick out above and below menu bar

Question

How can I make a bootstrap navbar like that: Navbar

The image should be centered on the navbar.

Here is what I have currently:

<div class="navbar navbar-static-top">
    <div class="navbar-inner"> 
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="index.html">
            <img style="height:50px;" src="http://kpv.s3.amazonaws.com/static/img/logo.jpg">
        </a>
        <div class="nav-collapse collapse">
            <ul class="nav pull-left">
                <li class="active">
                    <a href="index.html" class="scroller">Home</a>
                </li>
                <li>
                    <a href="pricing.html" class="scroller">Pricing</a>
                </li>
                <li>
                    <a href="knowledge.html" class="scroller">FAQ</a>
                </li>
            </ul>
        </div>

This is the CSS that accompanies the above code:

.navbar-inner{
    position:relative;
    padding-left:70px;
}

.navbar .brand {
    margin-left: 0px;
    font-size: 20px;
    font-weight: 200;
    color: #777777;
    text-shadow: 0 1px 0 #ffffff;
    position: absolute;
    width: 50px;
    background: #f00;
    left: 0px;
    top: 0px;
    padding: 10px;
}

That's my new code: http://www.bootply.com/gEoN0zJ3e8

How can I make the image centered?

Answer 1

Here's one way you can do this by using position:absolute to place your image. Depending on what you plan on doing for mobile, you'll have to adjust your navbar according (the example assumes the default Bootstrap behavior).

Working Example:

nav.navbar {
  margin-top: 50px;
  margin-bottom: 65px;
  border: 0;
}
nav.navbar .navbar-collapse {
  border: 0;
}
nav.navbar .navbar-brand {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: -50px;
  transform: translateX(-50%);
  padding: 0px;
}
nav.navbar .navbar-brand img {
  height: 150px;
  width: 150px;
  margin-left: -50px;
}
@media only screen and (min-width: 768px) {
  nav.navbar {
    margin-top: 65px;
    margin-bottom: 80px;
    min-height: 20px;
    height: 20px;
  }
  nav.navbar .navbar-nav > li > a {
    font-size: 12px;
    padding: 0px 10px;
  }
  nav.navbar .navbar-brand {
    top: -65px;
  }
}
@media only screen and (max-width: 767px) {
  nav.navbar .navbar-nav {
    margin-top: 50px;
  }
}

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

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="http://placehold.it/150x150/b71c1c/fff?text=LOGO">
      </a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html" class="scroller">Home</a>
        </li>
        <li><a href="pricing.html" class="scroller">Pricing</a>
        </li>
        <li><a href="knowledge.html" class="scroller">FAQ</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<div class="container">
  <div class="alert alert-info">
    Content
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

Here is the code. Adding class to image and adding some css style. You can change position editing .imgc class properties. Enjoy

.menu-container {
	background-color:#000000;
    height:40px;
}

.navbar-collapse { padding: 1px 30px;}

.navbar-brand {position:absolute;margin-top:-60px;}

.navbar-collapse {
    margin-top: 100px;
    margin-left: 120px;
    color: #fff;
}
.imgc {margin-top:-2px;}

#nav.affix {
    position:fixed;
    top:0;
    width:100%;
    z-index:10
}

#sidebar.affix-top {
    position:static
}

#sidebar.affix {
    position:fixed;
    top:80px
}

<div id="nav">
        <div class="navbar navbar-default navbar-static">
            <div class="menu-container">
                <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse"><span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span></a> <a class="navbar-brand" href="#"><img class="imgc" alt="" src="http://placehold.it/150x150&amp;text=Logo"></a>

                <div class="navbar-collapse collapse">
                 <ul>
                     <li>Home</li>
                    </ul>
                </div>
            </div>
        </div><!-- /.navbar -->
    </div>