How to make Bootstrap navbar brand image larger
<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>