I can't seem to figure out why the green menu is hidden behind the white header, making its links unclickable. It's necessary for the layout of the page, but it's causing this issue.
The white header has a position: fixed; attribute. The green menu, on the other hand, has a z-index -1 in order to be stacked behind the white header.
Is there a way to make the links clickable?
Update:
I've attempted changing the z-index values to both 99 and -99 for both elements. It seems that the only way to position the green menu behind the white header is by using a negative z-index value.
Second Update:
I also tested setting opacity: .99; for the white header with no success.
https://i.sstatic.net/4LZY3.png
.header {
margin: 32px 0 0 0;
padding: 0;
width: 100%;
height: 75px;
background-color: rgba(255,255,255,0.75);
border-top: 2px solid rgba(55,175,75,1.00);
border-bottom: 5px solid rgba(55,175,75,1.00);
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
position: fixed;
z-index: 1;
}
#menu {
position: fixed;
margin-top: 107px;
min-height: 40px;
width: 100%;
background-color: rgba(55,175,75,1.00);
border: 1px solid rgba(55,175,75,1.00);
border-radius: 0;
z-index: -1;
}