Responsive website menu z-index

Question

i'm trying to build a responsive menu. I'm having some problems with adding the correct Z-indexes.

Here is the website: http://erlendvanlandeghem.be/ When you make your window smaller, you should get a button that says "show menu". The menu then expands behind the content (cwrap). I've tried fixing it with z-indexes, but that doesn't seem to work.

Any help? Thanks in advance!

Answer 1

just add position:relative; to the following id #navwrapper

Answer 2

Add this code main.css at 302 number line.

@media only screen and (max-width: 480px)
#navwrapper {
   width: 100%;
   left: -1px;
   text-align: center;
   background-color: transparent;
   max-width: 480px;
   position: relative;
   z-index: 10;
}

Answer 3

Add z-index to #navwrapper and it will work

#navwrapper {
  width: 240px;
  left: -1px;
  background-color: #333333;
  height: 100%;
  position: fixed;
  float: left;
  text-align: left;
  box-shadow: 1px 0px 3px #888888;
  z-index: 999;
}