title: Z-index issue. Welcome message at the center of the Bootsrap navbar
body: <p>I want to use the bootstrap navbar and I want to display a Welcome message at the center of the navbar. I do this into HTML: <a href="https://jsfiddle.net/DTcHh/22779/" rel="nofollow">https://jsfiddle.net/DTcHh/22779/</a></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>@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
  
  body{
    padding-top: 87px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav  class="navbar navbar-inverse navbar-fixed-top"&gt;   
      &lt;button class="hamburger hamburger--collapse hamburger--accessible js-hamburger" type="button"&gt;
          &lt;span class="hamburger-box"&gt;
              &lt;span class="hamburger-inner"&gt;&lt;/span&gt;
          &lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="#home" id="menuhome"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#osteo" id="menuosteo"&gt;L'ostéopathie&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#parcours" id="menuparcours"&gt;Mon parcours&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact" id="menucontact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="welcome"&gt;
      &lt;h1&gt;Bienvenue&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the welcome message never display. If I put a high z-index to the welcome class there is issue with the hamburger menu... How can I get ride of this?</p>
  
  <p>Thanks in advance</p>