1

Im trying to get the navigation bar to remain fixed to the top of the browser when the user scrolls down. However I have an image above the navigation and I'd like it to scroll up as well so only the navigation bar remains when scrolling.

The main reason for this is that when the window size is reduced, the logo ends up covering a large portion of the screen and the content becomes very hard to see.

This is what I am trying to accomplish: http://corp.ign.com/

Here's a JSfiddle of what I have so far: http://jsfiddle.net/cZKeG/

HTML:

<div id="topWrapper">
    <a href="index.html">
        <header id="top_header">
            <h1>MacroPlay Games</h1>
        </header>
    </a>
    <nav id="topnav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="video.html">Trailers</a></li>
        </ul>
    </nav>   
</div>

CSS: 

#topWrapper {
    /*border:1px solid #00ffff;*/
    background-color:#0d0d0d;
    text-align:center;
    position:fixed;
    z-index:9999;
    width:100%;
    max-width: 850px;
    margin: 0 auto; left:0px; right:0px;
    float:clear;
    background-image: url('bg5.jpg');    
}
Batman
  • 5,563
  • 18
  • 79
  • 155
  • 1
    this has already been asked ... check this -> http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to – henser Feb 16 '13 at 00:28
  • Oh I didn't see this. Perfect, I'll look through it and try to figure it out. Thank you. – Batman Feb 16 '13 at 00:31
  • @henser, could you take a look, im having a lot of trouble figuring this out: http://jsfiddle.net/Csf9S/ – Batman Feb 16 '13 at 14:06

1 Answers1

0

A quick look at the code you offer suggests you you are making the whole topWrapper fixed when you only want the topnav to be fixed

Try this

#topnav {
/*border:1px solid #00ffff;*/
background-color:#0d0d0d;
text-align:center;
position:fixed;
z-index:9999;
width:100%;
max-width: 850px;
margin: 0 auto; left:0px; right:0px;
float:clear;
background-image: url('bg5.jpg');

}

Mattrix
  • 53
  • 5