CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
Ralitza
Ralitza

Reputation: 741

Aligning navigation elements with logo - Bootstrap 3

I'm using Bootstrap 3 to construct a responsive menu like so:

Logo Link 1 Link 2 Link 3 Link 4 (scales down to toggle in smaller devices)

The following does that, except when I choose to go with a larger logo image (440px by 140px) two problems occur 1) The navigation menu items rise to the top 2) In smaller devices, the logo doesn't seem to be responsive (doesn't scale down to fit screen)

Desktop view: enter image description here

Mobile view:
enter image description here

My goals are 1) logo and links aligned vertically on the same line 2) logo scales down to smaller size to make room for navigation toggle 

<div class='jumbotron grey-bg'>
    <div class='container-fluid'>
      <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-bar">
          <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="#">My Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="main-nav-bar">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li class='active'><a href='#'>Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href='#'>Link 4</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
      </nav>
    </div><!-- /.container-fluid -->
  </div><!--- end jumbotron -->
/* logo */
.navbar-brand {
  width: 440px;
  height: 140px;
  background: url(img/logo.jpg) no-repeat;
  text-indent: -999px;
  padding: 0px;
  margin: 0px;
}
/* end */

/* navigation */
.navbar-default {
  border: none;
  padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a {
  color: #666;
  padding: 11px 0;
  text-align: center;
}

.navbar-default .navbar-nav>li>a:hover {
  text-decoration: underline;
  color: #666;
}
/* end */

img {
  display: block;
  height: auto;
  max-width: 100%;
}

Upvotes: 0

Views: 451

Answers (1)

moodyjive
moodyjive

Reputation: 1807

If you want the image to be responsive, don't make it a background image (include in html) and add the class "img-responsive":

<a class="navbar-brand" href="#"><img src="img/logo.jpg" class="img-responsive"></a>

Upvotes: 1

Related Questions