title: How to make Bootstrap navbar brand image larger
body: <p>I am having a slight issue trying to increase the size of my navbar brand image i have inside my main navigation. It seem like it wont go any larger the 50px. I would like it around 100px high but just cant seem to work out how to do it. I currently have it in the center of the navigation with the burger menu along side it.</p>
  
  <p>Would anyone know how to achieve what i am trying to do?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default custom-nav"&gt;
    &lt;div class="container"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;About &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="team.php"&gt;Meet The Team&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Facilities&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Opening Times&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="membership.php"&gt;Membership&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Diary&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="lessons.php"&gt;Lessons&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt; Events&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="corporate.php"&gt;Corporate Days &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="hens_stags.php"&gt;Hens &amp; Stags&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Group Bookings&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Gallary&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;
    &lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .navbar-brand {
      background: url(../img/logo.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      width: 300px;
      transform: translateX(-50%);
      left: 50%;
      position: absolute;
      padding: 0;
    }
  
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
  }
  
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  
  .navbar .navbar-collapse {
    text-align: center;
  }
  
  .custom-nav {
    color: #fff;
    background: #718373;
    border-radius: 0;
    margin-bottom: 0;
    border: 0;
  }
  
  .custom-nav .navbar-nav&gt;li&gt;a {
    color: #fff;
    margin: 0 auto;
  }
  
  .custom-nav .navbar-nav&gt;li&gt;a:hover,
  .custom-nav .navbar-nav&gt;li&gt;a:focus {
    color: #fff;
  }
  
  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle:hover {
    background: none;
  }
  
  .custom-nav .navbar-nav&gt;.open&gt;a,
  .custom-nav .navbar-nav&gt;.open&gt;a:focus,
  .custom-nav .navbar-nav&gt;.open&gt;a:hover {
    color: #fff;
    background: none;
  }
  
  .custom-nav .navbar-nav li {
    margin: 0 auto;
    text-align: center;
    width: 150px;
  }
  
  .dropdown-menu {
    padding: 0;
    margin: 0;
    background: #718373;
    border: none;
    box-shadow: none;
    min-width: 90px;
  }
  
  .dropdown-menu li:last-child a {
    margin-bottom: 10px;
  }
  
  .dropdown-menu&gt;li&gt;a {
    display: block;
    clear: both;
    font-weight: normal;
    color: #fff;
    width: 95%;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0;
  }
  
  .dropdown-menu&gt;li&gt;a:focus,
  .dropdown-menu&gt;li&gt;a:hover {
    color: #fff;
    text-decoration: none;
    background: none;
    outline: 2px solid white;
    outline-offset: -2px;
  }
  </code></pre>
  
  <p>This is how it looks at the moment</p>
  
  <p><a href="https://i.stack.imgur.com/FqMDt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FqMDt.jpg" alt="Logo image"></a></p>
  
  <p>EDIT after adding</p>
  
  <pre><code>.navbar-header .navbar-brand {
    height: 100px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/gsSU1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gsSU1.png" alt="new logo image"></a></p>