Recently, I created an animated navbar that works perfectly fine. However, there is one issue that bothers me - when the list of menu items slides open, it appears in front of the navbar instead of behind it.
If you'd like to see the problem in action, I have set up a JSFiddle to demonstrate it: JSFiddle
Below is a snippet of the code (the full code is available in the fiddle):
HTML:
<header class="header">
<div id="logo"> <a href="#top">
<img src="http://lorempixel.com/125/25/abstract" alt="Logo"/>
</a>
</div>
<nav class="main-nav">
<ul>
<li><a href="#projects">Projects</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
<button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x"> <span class="lines"></span>
</button>
</nav>
<!-- main-nav -->
</header>
CSS:
.main-nav ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.main-nav ul.is-visible {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
}