CODEWITHSUNDEEP
htmlcss
Batman
Batman

Reputation: 6353

How to hide banner image but fix navigation to top when scrolling?

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');    
}

Upvotes: 1

Views: 1818

Answers (1)

Mattrix
Mattrix

Reputation: 53

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');

}

Upvotes: 0

Related Questions