Fixed Navigation on Top of Page

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

  1. macrumors newbie

    Joined:
    Dec 9, 2012
    #1
    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:

    [​IMG]

    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!
     
  2. macrumors 6502

    Joined:
    Mar 7, 2009
    #2
    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

    Joined:
    Dec 9, 2012

Share This Page