I'm struggling with getting my navigation bar to work properly alongside a slide animation. No matter what I try, the navbar keeps overlapping. Here's the code I have so far:
Here is the HTML section:
Navbar section:
<ul class="slideshow">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
This is the CSS section:
body {
background-color: #000;
}
#landing-header {
z-index: 1;
position: relative;
text-align: center;
padding-top: 40vh;
}
#landing-header h1 {
color: #fff;
}
.slideshow {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
list-style: none;
margin: 0;
padding: 0;
}
.slideshow li {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 0;
animation: imageAnimation 50s linear infinite;
}
.slideshow li:nth-child(1) {
background-image: url();
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
10% {
opacity: 1;
animation-timing-function: ease-out;
}
20% {
opacity: 1
}
30% {
opacity: 0
}
}