z-index not working on child element

[colette]

I’m hoping someone has a good set eyes and can help me solve this problem. I’m building my website with a full page navigation. I would like the hamburger menu to appear on top of the navigation overlay when it’s open. The hamburger menu is in a header container with position relative. Unfortunately, applying z-index only works on the parent container; it will not work if I only apply it to the menu.

Here’s the current page, http://colette-pitamba.github.io/blog/

the navigation overlay is commented out in the html for now. You will need to uncomment it in order to see it.

[Paulie_D]

A Codepen.io demo is infinitely preferanle to a link.

Help us help you.

[colette]

@Paulie_D – I’m not sure how to edit my original post, but here’s the codepen which should make things much easier to look at.

http://codepen.io/anon/pen/XXEmGz

Right now the overlay is commented out in the html. If you uncomment it, you’ll see that it covers the hamburger menu icon on the far right. I know there’s a way to keep the icon in its parent container and still have a z-index higher than the overlay. There is a Jsfiddle on it being done, but it’s not quite working in my situation.

[Paulie_D]

Yeah…not going to happen here I think.

You can’t make a button appear above an overlay like that unless the elements have some sort of relationship…and these don’t.

[Author]

Posts