Insert logo inside navigation menu , I am using bootstrap3

Question

This is exactly what I had to do a while ago. This is what I did:

In the navbar header replace the main title <a class="navbar-brand" href="#">Project name</a> with your logo graphics <a class="logo" href="#"><img src="/img/your-logo.png"></a>like this:

<body>
    <div class="top-banner"></div> <!--this keeps the top distance and also an ideal place for the top banner-->

    <div class="navbar 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="logo" href="#"><img src="/img/your-logo.png"></a> <!-- your logo comes here -->
        </div>

In your header include a custom css after the main bootsrap.css (keep your original bootstrap.css intact to be compatibel with future updates):

.top-banner {
height:107px; /* set this to whatever height your logo needs */
}

.logo {
position:absolute;
float:left;
top:-105px; /* again, use this to position your logo, you can also use left and right */
}

Then you can go in two directions, either set navbar's margin bottom to the appropriate height:

.navbar {
    margin-bottom: 60px;
    position: relative;
}

Or you can also put a subheader div right under your navbar:

<div class="subheader">
    <div class="subheader-inner">
        <div class="container"> </div>
    </div>
<div>

And add this to your css:

.subheader-inner {
    height:40px;
    margin-bottom:20px; /* or whatever values you need */
}

This way you can use the subheader to display navigation or other info, depending on your design.

Hope this helps.