Show div before fixed navigation top bar

Question

I have a fixed top bar, and now I need to append before this element a div to show a message.

Both should be fixed. First the alert message, and then the menu. How can i do that?

<div class="panel-msg">
  Important message here
</div>

<nav id=" mainNav " class="navbar navbar-default navbar-fixed-top " role="navigation ">
  <div class="container ">
    <div class="navbar-header ">
      <h1>
      demo
      </h1>
    </div>
  </div>
</nav>
<div class="demo ">
</div>

Demo

Answer 1

z-index is possible only with positioning so give the class panel-msg absolute position and a z-index higher than that of navbar like this:

 .panel-msg{
      position:absolute;
      z-index:222222;
      top:0px;
    }

Answer 2

It looks like when you use "navbar navbar-default navbar-fixed-top" it will override any changes you make and always put that navbar at the top. If you remove the word "top" it will show the msg panel.

Here's your example with an alert message above: http://jsfiddle.net/sawqv3gp/

But it loses it's fixed positioning. So you might want to try a different layout altogether.

I would recommend changing your design to allow for a "navbar header" and using the Bootstrap alert function (also always the user to close the alert).

Here's an example: http://www.bootply.com/4FSUjc2qej

<div class="alert alert-info" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Holy guacamole!</strong> Best check yo self, you are looking very good.