title: Split navbar in left-center-right with logo keeping responsive design
body: <p>what I'm trying to do is to split my navbar in left, center and right, on left it will be the Application name, on the center the different menu options but the text centered, on right should be the app logo (this will be hidden when minor resolutions appear) something like the below image</p>
  <p><a href="https://i.stack.imgur.com/QJa6p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QJa6p.png" alt="navbar" /></a></p>
  <p>At the moment this is what I have (navbar title needs to be on the middle align, menu options and user info centered and the logo should be on right instead of next to menu)</p>
  <pre><code>&lt;div class=&quot;navbar navbar-default navbar-static-top&quot; role=&quot;navigation&quot;&gt;
    &lt;div class=&quot;navbar-header&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbar-collapse&quot;&gt;
        &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
        &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;
        &lt;h2&gt;Application Name&lt;/h2&gt;
      &lt;/a&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbar-collapse&quot;&gt;
        &lt;ul class=&quot;nav navbar-nav navbar-center&quot;&gt;
          &lt;li class=&quot;active&quot;&gt;Home&lt;/li&gt;
          &lt;li&gt;About&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p class=&quot;navbar-text&quot;&gt;
          &lt;span class=&quot;welcome&quot;&gt;
            Welcome, Richard Sanchez
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;navbar-logo navbar-right&quot;&gt;
        &lt;a class=&quot;navbar-brand&quot; rel=&quot;home&quot; href=&quot;#&quot; title=&quot;Home&quot;&gt;
          &lt;img width=&quot;300&quot; height=&quot;40&quot; src=&quot;https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png&quot; class=&quot;img-responsive&quot;&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is a <a href="https://codepen.io/MiguelF/pen/ZEpqMEQ" rel="nofollow noreferrer">fiddle</a> to play with</p>
  <p>Pd. I'm using bootstrap 3.3.7</p>