z-index not working on fixed div

Question

So i have a website with a header and a navbar. The effect i'm trying to achieve is that the navbar lays behind the header and then slides out when scrolling past the header. Example

But the links wasn't clickable in the example above (they got covered by the header), so i redesigned a bit and got a successful result. But now the navbar stays on top of the header. I tried changing it by z-index, but with no success, and i have no idea what is wrong.. Example 2

(the links are server archives, won't be changed.)

Sincerely, a confused dev.

Answer 1

Changed your code in your first exmple, now it's working fine:

#Nav {
position: fixed;
background-color: #F0F4C3;
width: 100%;
background-size: 100% auto;
background-position: right center;
background-repeat: no-repeat;
top: 0px;
z-index: 10000;
box-shadow: 0px 4px 0px #AFB42B;
height: 50px;
margin-left: -8px;}
#Pic {
    height: 300px;
    /*changed*/
    z-index: 100001;
    margin-left: -8px;
    margin-right: -8px;
    margin-top: -8px;
    /*added*/
    position: relative;
}

You have to add position:relative to the elements using z-index make the z-index work

Answer 2

Found the problem:

Add position: to #headimage in the css.

My bad guys :).