title: Center button in Bootstrap navbar (outside collapse)
body: <p>I would like to have a button in the navbar that is:</p>
  
  <ul>
  <li>inline with the rest of the navbar items (i.e. it doesn't get pushed to the next line); </li>
  <li>located outside of the collapsed navbar section; and</li>
  <li>always positioned in the center of the page for all screen resolutions (including when the right-side of the navbar is collapsed).</li>
  </ul>
  
  <p>I am having particular problems with:</p>
  
  <ul>
  <li>centering the button; and</li>
  <li>some of the navbar items not working for smaller screen resolutions (when navbar is collapsed).</li>
  </ul>
  
  <p>Below is my code.</p>
  
  <p>Alternative CSS that I tried:</p>
  
  <pre><code>.navbar-button {
      position: absolute;
      left: 0;
      width: 100%;
      text-align: center;
      white-space: nowrap;
  }
  </code></pre>
  
  <p>but this caused some of the other navbar links to not work. I subsequently tried to make use of <code>z-index</code>, but it didn't seem to work. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding-top: 50px;
    padding-bottom: 20px;
  }
  .section {
    margin-bottom: 30cm;
  }
  .navbar-button {
    display: inline-block;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
  
    &lt;title&gt;Test&lt;/title&gt;
  
    &lt;!-- Bootstrap Core CSS --&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&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="#brand"&gt;Brand&lt;/a&gt;
          &lt;div class="navbar-button"&gt;
            &lt;button type="button" class="btn btn-primary navbar-btn"&gt;Button&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li class="text-center"&gt;
              &lt;a href="#link1"&gt;Link-1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="text-center"&gt;
              &lt;a href="#link2"&gt;Link-2&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="text-center"&gt;
              &lt;a href="#link3"&gt;Link-3&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="section" id="brand"&gt;
          &lt;h3&gt;Top&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="section" id="link1"&gt;
          &lt;h3&gt;Section-1&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="section" id="link2"&gt;
          &lt;h3&gt;Section-2&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="section" id="link3"&gt;
          &lt;h3&gt;Section-3&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>