Hi all, i'm new here but here's my question. Currently, my top fixed nav bar is not going on top of the slider i have when i scroll down... see image:
![2012-12-09093731am.png]()
I'm not sure if its an issue with the css in my navigation or the header slider. Here is the css for both:
/************* NAVIGATION ************/
body {
padding: 0;
margin: 0;
}
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
/************* HEADER ************/
#header div {
font-family: Georgia, serif;
font-size: 16px;
margin: 0;
overflow: hidden;
padding: 0;
}
#banner {
width: 800px;
height: 300px;
position: relative;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}
#banner div {
position: absolute;
}
#banner div:nth-child(2) {
-webkit-animation: wipe 6s infinite;
-webkit-animation-delay: 3s;
-webkit-animation-direction: alternate;
-webkit-mask-size: 2000px 2000px;
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom,
color-stop(0.00, rgba(0,0,0,1)),
color-stop(0.45, rgba(0,0,0,1)),
color-stop(0.50, rgba(0,0,0,0)),
color-stop(0.55, rgba(0,0,0,0)),
color-stop(1.00, rgba(0,0,0,0)));
}
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: -1200px -1200px;
}
}
HERE's the HTML:
<body>
<div id="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Donations</a>
<a href="#">Calendar</a>
<a href="#">Contact</a>
</div>
<div id="content">
<div class="header">
<div id="banner">
<div><img src="images/banner-1.jpg" alt="Skyline 1"></div>
<div><img src="images/banner-2.jpg" alt="Skyline 2"></div>
</div></div>
the text that's on the page now does go behind the nav bar perfectly...it's jut the slider that i need help with. I want the nav bar to always be on top of everything. Any help is appreciated, thanks in advance!
I'm not sure if its an issue with the css in my navigation or the header slider. Here is the css for both:
/************* NAVIGATION ************/
body {
padding: 0;
margin: 0;
}
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
/************* HEADER ************/
#header div {
font-family: Georgia, serif;
font-size: 16px;
margin: 0;
overflow: hidden;
padding: 0;
}
#banner {
width: 800px;
height: 300px;
position: relative;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}
#banner div {
position: absolute;
}
#banner div:nth-child(2) {
-webkit-animation: wipe 6s infinite;
-webkit-animation-delay: 3s;
-webkit-animation-direction: alternate;
-webkit-mask-size: 2000px 2000px;
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom,
color-stop(0.00, rgba(0,0,0,1)),
color-stop(0.45, rgba(0,0,0,1)),
color-stop(0.50, rgba(0,0,0,0)),
color-stop(0.55, rgba(0,0,0,0)),
color-stop(1.00, rgba(0,0,0,0)));
}
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: -1200px -1200px;
}
}
HERE's the HTML:
<body>
<div id="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Donations</a>
<a href="#">Calendar</a>
<a href="#">Contact</a>
</div>
<div id="content">
<div class="header">
<div id="banner">
<div><img src="images/banner-1.jpg" alt="Skyline 1"></div>
<div><img src="images/banner-2.jpg" alt="Skyline 2"></div>
</div></div>
the text that's on the page now does go behind the nav bar perfectly...it's jut the slider that i need help with. I want the nav bar to always be on top of everything. Any help is appreciated, thanks in advance!
