Z-index issue. Welcome message at the center of the Bootsrap navbar

Question

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: https://jsfiddle.net/DTcHh/22779/

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

body{
  padding-top: 87px;
}

<nav  class="navbar navbar-inverse navbar-fixed-top">   
    <button class="hamburger hamburger--collapse hamburger--accessible js-hamburger" type="button">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#home" id="menuhome">Accueil</a></li>
            <li><a href="#osteo" id="menuosteo">L'ostéopathie</a></li>
            <li><a href="#parcours" id="menuparcours">Mon parcours</a></li>
            <li><a href="#contact" id="menucontact">Contact</a></li>
        </ul>
    </div>
</nav>
<div class="welcome">
    <h1>Bienvenue</h1>
</div>

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?

Thanks in advance

Answer 1

2nd version

We can't put a div outside of the navbar and place this div between the navbar and its items because of the different stacking contexts:

Each stacking context is completely independent from its siblings: only descendant elements are considered when stacking is processed.

So we have to put the welcome block inside the navbar at the very beginning of its. And we don't need to use z-index in this case.

Please check the result: https://jsfiddle.net/glebkema/4baoqn6p/

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

body{
  padding-top: 87px;
}

.welcome {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 0;
}
.welcome h1 {
  color: #555;
  font-weight: 900;
  line-height: 50px; /* = height of navbar */
  margin: 0;
}

@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
  .navbar-inverse .navbar-nav>li>a {
    color: #ccc; 
  }
}

<nav class="navbar navbar-inverse navbar-fixed-top">   
    <div class="welcome">
        <h1>Bienvenue</h1>
    </div>
    <button class="hamburger hamburger--collapse hamburger--accessible js-hamburger" type="button">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#home" id="menuhome">Accueil</a></li>
            <li><a href="#osteo" id="menuosteo">L'ostéopathie</a></li>
            <li><a href="#parcours" id="menuparcours">Mon parcours</a></li>
            <li><a href="#contact" id="menucontact">Contact</a></li>
        </ul>
    </div>
</nav>

1st version

1. The .navbar-fixed-top class has the z-index: 1030; porperty. So z-index for the .welcome class must be greater.

2. Use the position: absolute; property.

3. The left: 0; right: 0; properties makes the block as wide as the screen.

Please check the result: https://jsfiddle.net/glebkema/fc8aydb4/

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

body{
  padding-top: 87px;
}

.welcome {
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 5px;
  z-index: 2000;
}
.welcome h1 {
  margin: 0;
}

<nav class="navbar navbar-inverse navbar-fixed-top">   
    <button class="hamburger hamburger--collapse hamburger--accessible js-hamburger" type="button">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#home" id="menuhome">Accueil</a></li>
            <li><a href="#osteo" id="menuosteo">L'ostéopathie</a></li>
            <li><a href="#parcours" id="menuparcours">Mon parcours</a></li>
            <li><a href="#contact" id="menucontact">Contact</a></li>
        </ul>
    </div>
</nav>
<div class="welcome">
    <h1>Bienvenue</h1>
</div>