Navbar with sidebar in Bootstrap

Question

I have a navbar of bootstrap and a sidebar and I want to make this

but i obtain this

I can't make the navbar appear in front of the sidebar.

Answer 1

Play with z-index properly and it works good :

See it here

.navbar{
    margin-top: 20px;
    position: relative; 
    z-index:2;
}
#sidebar-wrapper {
    z-index: 1;
    position: fixed;
    top:0;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #8CCA59;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Answer 2

Use position:absolute for the navbar (you may want this in a media query so it only applies to larger screens). Then add position:relative to your #wrapper .

You can then use z-index to put the navbar "above" the wrapper...:

Relevant CSS (I added an ID to your navbar):

#navbar
{
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:100;
}

#wrapper {
  position:relative;
  z-index:50;
  ...

https://jsfiddle.net/ebvqcq26/