Menu button only displays underneath the open menu


I’ve created a pretty standard full-screen mobile menu for tablet and below, with a hamburger button and “over right” animation type.

But for some reason, no matter what I do with the positioning values and z-index, the hamburger button always appears below the menu once it’s open.

How can I fix this?

You just need to add another way of closing it, i.e button, otherwise, why would the original button (that activates it) be visible if you have a div acting as a fullscreen menu background?

Here is how I would approach it:

Obviously that would translate to the way you order elements on the left. The container-nav being the highest z-index so you can see the new button when the menu is open.