Grid 960 - Stick the Header

Question

I'm using the 960gs and i want my Header & navigation bar to be sticky at the top. I've tried to stick the div's using the position:fixed. Result: The Whole 960 grid messed up.

<!-- Header-->

<div class="container_12 stick">
<div class="grid_6 alpha ">
... 
</div>

<div class="grid_6 omega">
...
</div>

</div>

<!-- NavBar->
<div id="nav" class="container_12 stick">

 <div class="grid_2 alpha prefix_4" >   
    <h1><a href="#whoami">...</a></h1>
 </div>

 <div class="grid_2 button textAlignC"> 
    <h1><a href="#works">...</a></h1>
 </div>

 <div class="grid_2 button textAlignC"> 
    <h1><a href="#hobbies">...</a></h1>
 </div>

 <div class="grid_2 omega button textAlignC">   
    <h1><a href="#contacts">...</a></h1>
 </div> 

</div>

.stick{
position:fixed;    
}

Ideas?

score 1 · Answer 1 · answered Oct 11 '11 at 22:30

1

Use a wrapper like such:

<html>
    <head>stuff</head>
    <body>

        <div id="nav">
            <div class="container col_12">
            </div>
        </div>
        <div id="content">
            <div class="container col_12">
            </div>
        </div>  

    </body>
</html>

and make the div#nav fixed top, and it works. You might want to give the div#content a margin push with the height of the navbar for a better scroll effect.. Remember this doesn't work on handhelds so use a framework if needed

answered Oct 11 '11 at 22:30

Hedde van der Heide

21,841
13
71
100

I applied position:fixed to nav, using the structure you gave me. Still messes the grid. The content inside the nav floats. – danieltorres Oct 11 '11 at 23:15
use the grid's clear class after the last floating element in your containers 'code'(
)'code' – Hedde van der Heide Oct 12 '11 at 05:35
I had already tried clearing. Just can't understand why if floats when i activate the position:fixed. – danieltorres Oct 12 '11 at 07:29

score 0 · Answer 2 · edited Oct 02 '12 at 10:17

0

Adding z-index:-length-; on the header would help, but I'm trying to find a better solution.

edited Oct 02 '12 at 10:17

ЯegDwight

24,821
10
45
52

answered Aug 08 '12 at 06:13

johnp

1

score 0 · Answer 3 · answered Oct 12 '11 at 07:45

0

This jsfiddle shows how it should work... http://jsfiddle.net/s5syC/

answered Oct 12 '11 at 07:45

Hedde van der Heide

21,841
13
71
100

If you try that code using the 960gs framework, it won't work. – danieltorres Oct 12 '11 at 14:29
there's no real difference between the 978 or 960 grids css.. just look for a difference in the class naming and properties for the container.. and make sure your cols count up to the appropriate width.. there should be NO extra margin, padding or borders on the col elements unless you overwrite the width also – Hedde van der Heide Oct 12 '11 at 14:50

Grid 960 - Stick the Header

3 Answers3