Menu icon Foundation
sticky nav - control z-index of hamburger icon

I have a sticky nav that has a css triangle that is 50% transparent, that sits over the top of the corner or the website. 

I would like the actual hamburger icon to be pushed to the top layer above the triangle so that it is white.

I can't put the entire top bar above the triangle because it will block it, and I can't have a transparent background on the top bar because you will see the content scroll beneath it.

For some reason I can't change the z-index of just the hamburger ( or top-bar-right ) to force it to the top

I've included a rough example on codepen - this isn't the exact code I'm using but is a stripped down version

 

https://codepen.io/nitrokev/pen/XzRpGp

sticky

I have a sticky nav that has a css triangle that is 50% transparent, that sits over the top of the corner or the website. 

I would like the actual hamburger icon to be pushed to the top layer above the triangle so that it is white.

I can't put the entire top bar above the triangle because it will block it, and I can't have a transparent background on the top bar because you will see the content scroll beneath it.

For some reason I can't change the z-index of just the hamburger ( or top-bar-right ) to force it to the top

I've included a rough example on codepen - this isn't the exact code I'm using but is a stripped down version

 

https://codepen.io/nitrokev/pen/XzRpGp

kevin neal 10 days ago

Figured it out - it was nothing to do with being sticky.

I'd forgotten that z-index stacking order is relative to the parent element, so just had to bring the triangle and menu icon into the same parent