So there's a website I'm working on which uses a hamburger menu. Once is clicked, this hamburger menu shows a a fullscreen overlay with menu options.
I would like this overlay to fade in when the hamburger menu is clicked and fade out once it's clicked again.
At the moment I have being able to make the overlay to fade in by adding an active class to the overlay menu and by adding the following CSS:
-webkit-transition: opacity 1s, visibility 1s;
transition: opacity 1s, visibility 1s;
z-index property isn't animatable, and is therefore required on both the open and unopened nav overlay for other animations to be seen. (It's comparable to setting an element to
display: none and wondering why animations aren't visible.)
z-index from the
.overlay.open class to the main
.overlay class solves this issue.