Fixed Navigation on Top of Page

Discussion in 'Web Design and Development' started by tuffguy515, Dec 9, 2012.

  1. macrumors newbie

    Dec 9, 2012
    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'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!
  2. macrumors 6502

    Mar 7, 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.
  3. thread starter macrumors newbie

    Dec 9, 2012

Share This Page