Bootstrap 3.0 navbar-brand enlarges navbar

Question

I'm having troubles using navbar-brand when including my logo. First of all, I am using the latest bootstrap CSS (getbootstrap.com) and the problem is also viewable there: The navbar is a bit to big whenever the logo is included. If I only use text, it's perfectly fine. You can see of how much when hovering a navbar element, it still shows a bit "lighter" color (so no hover-area) under the navigation element.

I have tried to edit it in any ways, also to take a look at the CSS although I am not so sure about changing it, so I rather ask here first before changing anything.

The following code is the part of the navigation bar I have problems with:

<a class="navbar-brand" href="index.php?p=home">
<img src="images/page/header_trans2.png" />
</a>

Including the following full navigation-bar code:

<div class="navbar navbar-primary navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="index.php?p=home">
            <img src="images/page/header_trans2.png" />
        </a>
    </div>
    <div class="collapse navbar-collapse">
        <div class="row">
            <div class="col-md-8">
            <ul class="nav navbar-nav">
            <li class="<?php $site = $_GET["p"]; if($site == "update") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=update">Updates</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-target="#" data-toggle="dropdown">About <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="index.php?p=about">AIRTRADE Aircraft Germany</a></li>
                    <li><a href="index.php?p=partners">Distribution Partners</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-target="#" data-toggle="dropdown"><strong><span class="glyphicon glyphicon-th-list"></span> Sales</strong> <b class="caret"></b></a>
                <ul class="dropdown-menu list-group">
                    <li class="<?php $site = $_GET["p"]; if($site == "jetsale") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=jetsale"><b>Jets</b>   <span class="badge text-right" align="right"><?php echo $jets; ?></span></a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "airsale") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=airsale"><b>Aircrafts</b>  <span class="badge text-right"><?php echo $airs; ?></span></a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "helisale") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=helisale"><b>Helicopters</b>   <span class="badge text-right"><?php echo $helis; ?></span></a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-target="#" data-toggle="dropdown">AirShop <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li class="<?php $site = $_GET["p"]; if($site == "flightsim") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=flightsim">Flight Simulators</a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "magictow") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=magictow">Magic Tow</a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "mlube") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=mlube">MetalLube Anti-Friction</a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "equipparts") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=equipparts">Equipment parts</a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "partners2") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=partners2">Partners</a></li>
                    <li class="<?php $site = $_GET["p"]; if($site == "misc") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=misc">Miscellaneous</a></li>
                </ul>
            </li>
            <li class="<?php $site = $_GET["p"]; if($site == "contact") { echo 'active'; } else { echo ''; } ?>"><a href="index.php?p=contact">Contact</a></li>

            </ul>
            </div>
            <div class="col-md-2">
            <ul class="nav navbar-nav">
                <li>
                <?php if ($login->isUserLoggedIn() == true) : ?>
                    <p class="navbar-text navbar-right text-right">Signed in as <a href="index.php?p=overview" class="navbar-link"><?php echo $_SESSION['user_name'] ?></a></p>
                <?php endif; ?>
                </li>
            </ul>
            </div>
        </div>
    </div><!-- /.nav-collapse -->
</div><!-- /.container -->

Thanks for any help!

Answer 1

This is because the brand is probably made for text, not a logo.

Your logo is 26px in height, so you have a remaining 24px of padding - 12px for each top and bottom (the navbar is 50px high).

.navbar-brand {
    padding: 10px 15px;
}

10px turns out as a good top padding value as the logo text is then aligned with the menu items. As long as top+bottom padding are below 24px, you can safely ignore the bottom padding, otherwise do e.g.

.navbar-brand {
    padding: 20px 15px 4px 15px; /* last left padding value _can_ be left away */
}

Answer 2

I cannot see any height in your bootstrap.min.css file.

.navbar-brand {
    height: 50px;
}