CODEWITHSUNDEEP
htmltwitter-bootstrap
SdFRO0QS78
SdFRO0QS78

Reputation: 91

Bootstrap, how to adapt a logo to the navbar size?

I'm making the navbar of my Website with the following code:

  <nav class="navbar navbar-inverse navbar-fixed-top"> 

    <div class="navbar-header">

    <img src="images/logo.png" class="img-circle">
    </div>

    <div class="container-fluid">
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#">Liens</a> </li>
        <li> <a href="#">Login</a> </li>
        <li> <a href="#">Signup</a> </li>
      </ul>
    </div>
  </nav>

The problem is that the logo image is big (225x225 pixels), and I would like to set it to the default size of the navbar. But the opposite happens, i.e the navbar adapts to the size of the logo (and becomes very big).

I did not find any feature in bootstrap to do this ? Any idea ?

Thank you

Upvotes: 2

Views: 6311

Answers (2)

Banzay
Banzay

Reputation: 9470

navbar-fixed-top has a fixed height 50px, so you can directly style an image by setting e.g. max-height: 40px to it and margin: 5px to center image.

.navbar-header img {
  height: 40px;
  margin: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top"> 

    <div class="navbar-header">

    <img src="http://lorempixel.com/225/225" class="img-circle">
    </div>

    <div class="container-fluid">
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#">Liens</a> </li>
        <li> <a href="#">Login</a> </li>
        <li> <a href="#">Signup</a> </li>
      </ul>
    </div>
  </nav>

Upvotes: 5

Misachi
Misachi

Reputation: 81

I had the same problem sometime back and this is what I did . Hope this works for you

.brand{
	max-height: 30px;
	
}
 <a href="link/location/here" class="img-circle">
   <img class="brand" src="img/logo.png">
 </a>

Upvotes: 2

Related Questions