hamacka hamacka - 26 days ago 7
CSS Question

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

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


Thats my new code: http://www.bootply.com/gEoN0zJ3e8

How can I make the image centerd?

Thank you very much in advance
Regards

Answer

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>