Bootstrap: Create youtube-like top navigation
<p>I'm working with bootstrap and i want to create a 3-part sticky-top-navigation:</p>

<p><ul>
<li>Left part -  list with logo and glyphicons, floating left, static content (3 list items)</li>
<li>Middle part -  list, dynamic list (rendering view), N items</li>
<li>Right part -  list with logo and glyphicons, floating right, static content (3 list items)</li>
</ul>
I'm using navbar from bootstrap but i can't figure out how to center middle part of it.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-items" aria-expanded="false" aria-controls="navbar"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="/"&gt;&lt;img src="/img/logo.png"&gt;&lt;/a&gt;
      &lt;/div&gt;

      &lt;div id="navbar-global-items" class="navbar-collapse collapse"&gt;

        &lt;!-- LEFT MENU --&gt;
        &lt;ul class="nav navbar-nav navbar-left global-nav-left"&gt;
            &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;  
            &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

        &lt;!-- RIGHT MENU --&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

        &lt;!-- NEEDS TO BE CENTERED (*in the remaining space between left and right div*) --&gt;
        &lt;ul class="nav navbar-nav"&gt;
            &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
</div>
</div>
</p>

<p>Can you please help?</p>