Fixed Navigation on Top of Page

tuffguy515 · Dec 9, 2012, 11:48 AM

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:

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!

shootingrubber · Dec 9, 2012, 07:24 PM

Try setting the z-index of the navigation to something like 9999.
Try: z-index:9999;

Also, I am just assuming you haven't pasted the whole code, but close your body tags and div tags. Also, close your img tags.

tuffguy515 · Dec 10, 2012, 11:06 PM

perfect, thanks! z-index:9999; worked

Dec 9, 2012, 11:48 AM	#1
tuffguy515 macrumors newbie Join Date: Dec 2012	Fixed Navigation on Top of Page 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: 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!
	0

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Dec 9, 2012, 07:24 PM	#2
shootingrubber macrumors regular Join Date: Mar 2009	Try setting the z-index of the navigation to something like 9999. Try: z-index:9999; Also, I am just assuming you haven't pasted the whole code, but close your body tags and div tags. Also, close your img tags.
	1

Dec 10, 2012, 11:06 PM	#3
tuffguy515 Thread Starter macrumors newbie Join Date: Dec 2012	perfect, thanks! z-index:9999; worked
	0


MacRumors Forums > Special Interests > Visual Media > Web Design and Development