Trying to add a logo in my navigation

Question

I'll be honest, I'm probably missing something. What I'm trying to do with Bootstrap 3 is have a navigation that looks like this:

http://s24.postimg.org/a8bo7btol/Untitled.png

Now I have a basic structure of my HTML and the main issue is when I shrink my browser to roughly 700px wide, the main navigation stays on the top, the second navigation ends up underneath my main navigation (basically - my width was exceeded and everything falls down).

My image is 374 x 45.

Here is the non-bootstrap CSS:

body {
    margin-top: 125px;
}
.nav {
    margin-top: 28px;
}

Here is my HTML...

<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
          <a href="index.php" class="navbar-brand logo-nav"><img src="images/icon.png"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav navbar">
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>

I'm at my wits end here... What am I missing?

Answer 1

Replace your external CSS with this...

body {
 margin-top: 125px;
}    
.logo-nav {
  padding: 5px 0px;
}
.logo-nav img{
  width:254px;
  height: auto;
}

This will make things work. You can control the space above logo with padding just make sure it does nor exceed total 50 px(total padding + calculated height of logo). In that case either you have decrease the width of logo or increase height of navbar. You can say thanks by accepting as correct answer.