3

I am having some problems with my navbar-brand for the navbar on my site. I want it to appear vertically aligned and as a smaller size, could you suggest how this could be achieved.

<div class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #FFFFFF">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="http://www.howlongagogo.com/assets/GOGO.png"></a></div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/#enterdate">Enter Date</a></li>
        <li class="hidden-xs" style="padding-top:15px"><div class="fb-like" data-href="https://www.facebook.com/howlongagogo" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
  <div style="width:100%;height:10px;background-color:#428BCA;"></div>
</div>

I have also created a bootply for convenience http://www.bootply.com/XDybrUMhJ2 Thanks

L. Smith
  • 105
  • 3
  • 10

2 Answers2

2

You can constrain the size of the image and use line-height to center things. See SO Post also.

.navbar.navbar-wrap3 .navbar-brand {
  padding: 0;
  margin: 0;
}
.navbar.navbar-wrap3 .navbar-brand img {
  height: 75px;
  width: 300px;
  padding: 0;
  margin: 0;
  left: 0;
}
.navbar.navbar-wrap3 {
  background: #77B69C;
  border-bottom: 10px solid #428BCA;
}
.navbar.navbar-wrap3 .navbar-header {
  height: 75px;
}
.navbar.navbar-wrap3 .navbar-toggle {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .navbar.navbar-wrap3 .navbar-nav > li > a {
    line-height: 45px;
  }
}
@media (max-width: 360px) {
  .navbar.navbar-wrap3 .navbar-brand img {
    height: auto;
    width: 210px;
    padding: 0;
    margin: 4px 0;
    left: 0;
  }
  .navbar.navbar-wrap3 .navbar-nav > li > a {
    line-height: 20px;
  }
  .navbar.navbar-wrap3 .navbar-toggle {
    margin-top: 8px;
  }
  .navbar.navbar-wrap3 .navbar-header {
    height: auto;
  }
  body {
    background: red;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top navbar-wrap3" role="navigation" style="background-color: #FFFFFF">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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="http://www.howlongagogo.com/assets/GOGO.png">
      </a>

    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">Home</a>

        </li>
        <li><a href="/#enterdate">Enter Date</a>

        </li>
        <li class="hidden-xs" style="padding-top:15px">
          <div class="fb-like" data-href="https://www.facebook.com/howlongagogo" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
  <div style="width:100%;height:10px;background-color:#428BCA;"></div>
</div>
vanburen
  • 21,502
  • 7
  • 28
  • 41
0

Replace code 

<a class="navbar-brand" href="/"><img src="http://www.howlongagogo.com/assets/GOGO.png"></a>

with

<a style="background-image: url(&quot;http://www.howlongagogo.com/assets/GOGO.png&quot;); width: 324px; height: 68px;" class="navbar-brand" href="/"></a>
Arun
  • 1,177
  • 9
  • 15
  • The Image is still too big, If I change the css to make it smalled it gets covered up by the other two buttons, do I need to change it at source? – L. Smith Sep 28 '15 at 13:21