Why does my navigation bar fade with slideshow? - html

Question

So I have created a rough nav bar at the top of the page, on top (I thought) of the picture slideshow, but for some reason the background color of the navigation bar fades to transparent as the slideshow changes images. How do I stop it from doing this, and set it to a fixed opacity? Thankyou.
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(../../../images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: -10;
-webkit-backface-visibility: visible;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 3;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 30s linear infinite 0s;
-moz-animation: titleAnimation 30s linear infinite 0s;
-o-animation: titleAnimation 30s linear infinite 0s;
-ms-animation: titleAnimation 30s linear infinite 0s;
animation: titleAnimation 30s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
z-index: -7;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/image%201.jpg);
z-index: -7;
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/image%202.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
z-index: -7;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/image%203.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
z-index: -7;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/image%204.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
z-index: -7;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/image%205.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
z-index: -7;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
z-index: -7;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
z-index: -7;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
z-index: -7;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
z-index: -7;
}
/* Animation for the slideshow images */
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
/* Animation for the title */
#-webkit-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#-moz-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#-o-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#-ms-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span {
opacity: 1;
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 {
font-size: 140px
}
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 {
font-size: 80px
}
}
.logo {
position: relative;
width: 120px;
top: 30px;
float: left;
margin-left: 25px;
}
/* CSS Document */
a {
font-family: Arial;
text-decoration: none;
color: white;
font-size: 15px;
}
ul {
list-style-type: none;
}
li {
display: inline;
padding: 10px;
}
.list {
position: relative;
margin-top: 40px;
float: right;
}
.navbar {
background-color: black;
height: 100px;
width: 100%;
z-index: 6;
}
<div class="navbar">
<img class="logo" src="images/hk white.png" />
<ul class="list">
<a class="alist" href="index.html">
<li class="listli" id="home"><strong>HOME</strong>
</li>
</a><strong>
<a class="alist" href="products.html"><li class="listli" id="about">PRODUCTS</li></a>
<a class="alist" href="blog.html"><li class="listli" id="work">BLOG</li></a>
<a class="alist" href="contact.html"><li class="listli" id="contact">CONTACT</li></a>
</ul>
</div>
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>hon·our</h3></div></li>
<li><span>Image 02</span><div><h3>pas·sion</h3></div></li>
<li><span>Image 03</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 04</span><div><h3>re·spec·t</h3></div></li>
<li><span>Image 05</span><div><h3>cul·ture</h3></div></li>
</ul>
Let me know if you also need the JS file.

Answer 1

Hi
try to change this and it should work.
HTML
<li>
<span>
<img src="ImageHere"></span>
<div class="slides"><h3>hon·our</h3></div>
</li>
CSS
.cb-slideshow li .slides h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
z-index: 0;
position:absolute;
top:50%;
}
Fiddle demo here
I hope this helps