Bootstrap alignment - nav header alignment

Question

I am trying to achieve this:

However, because I have an image, left aligned, and then two lines NEXT to the image (One is a H1 and one is a H2), I am battling to get the 'brand' box inside my nav bar. It seems to have a lot of padding and strange stuff going on.

This is my nav bar code:

<div class="navbar navbar-inverse navbar-custom shadow_bottom navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#small-navbar-button">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="header">
                    <a class="navbar-brand" href="#">
                        <img src="~/images/logo.png" alt="AccuFinance - Home Budget Site" />
                    </a>

                    <a class="navbar-brand" href="#">

                        <h1>AccuFinance</h1>
                        <h2>Home Finance - Simplifying Budgeting</h2>
                    </a>
                </div>


            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="small-navbar-button" style="padding-right: 25px">
                <ul class="nav navbar-nav pull-right">
                    <li class="active"><a href="/"><span class="glyphicon glyphicon-home"></span>&nbsp;Home</a></li>

...

This issue is probably around my class="header" area. I have created some css to try and position my items correctly:

.header img {
    float: left;
    margin: 2px;
    top: 5px;
    padding: 0;
}

.header h1 {
    position: relative;
    top: 5px;
    bottom: 2px;
    left: 2px;
}

But I can't seem to correctly align the two headers next to the image, WITHIN the navbar area.

Bootply version: http://www.bootply.com/OzTmfYgHX7

The issue seems to be that my branding block (With the image and text) seems to have a large padding at the top. The image should be right up against the top of the screen.

Answer 1

If you customize bootstrap:

http://getbootstrap.com/customize/

Change the @navbar-height to something around 75px. That should do it for you.

By default bootstrap limits the height to 50px. Any Brand images that are taller than that will overflow into the content below.

Answer 2

You'll find that you are wrapping the logo image and logo text with the .navbar-brand class.

.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

So you could make a custom class based upon it and diddle the values to suit. Something like my-navbar-brand or whatever you like. Just having a quick play with it setting the padding to 5px 15px might be suitable.

.my-navbar-brand {
  float: left;
  height: 50px;
  padding: 5px 15px;
  font-size: 18px;
  line-height: 20px;
}