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

Thread Tools Search this Thread Display Modes
Old Dec 9, 2012, 11:48 AM   #1
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:


<div id="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Donations</a>
<a href="#">Calendar</a>
<a href="#">Contact</a>

<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>

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!
tuffguy515 is offline   0 Reply With Quote
Old Dec 9, 2012, 07:24 PM   #2
macrumors 6502
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.
shootingrubber is offline   1 Reply With Quote
Old Dec 10, 2012, 11:06 PM   #3
Thread Starter
macrumors newbie
Join Date: Dec 2012
perfect, thanks! z-index:9999; worked
tuffguy515 is offline   0 Reply With Quote

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

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Why is Safari page zooming not fixed yet? Krayzkat OS X Mavericks (10.9) 9 Feb 3, 2014 01:27 PM
Tapatalk Ad at the top of every Safari page zhenya iOS 7 4 Dec 29, 2013 03:33 PM
No quick way to go to top of web page etc abz1981 iOS 7 7 Sep 19, 2013 02:15 PM
Unibody top case replacement cost? UPDATE: I fixed it! Quicksilver867 MacBook Pro 6 Jun 22, 2013 08:19 AM

Forum Jump

All times are GMT -5. The time now is 03:50 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2015, MacRumors.com, LLC