CODEWITHSUNDEEP
csstwitter-bootstrap
Behrouz Riahi
Behrouz Riahi

Reputation: 1791

How to resize the navbar header image?

I'm trying to include an image as my navbar header as the code shows below:

<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #000000;" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <img class="navbar-brand" src="logo.jpg" alt="">
    </div>
  </div>
</nav>

The icon appears but very small. How can I resize it?

Upvotes: 0

Views: 152

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

You have to reduce the padding of navbar-brand.

See the following example (https://jsfiddle.net/m9acxw28/1/):

.navbar-brand {
  padding:0;
}
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #000000;" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <img class="navbar-brand" src="http://placehold.it/100x100" alt="">
    </div>
  </div>
</nav>

Hint: Make sure the custom CSS is placed after the Bootstrap CSS!

Upvotes: 1

Related Questions