Loric- Loric- - 1 month ago 8
CSS Question

HTML/CSS Make header and nav sticky on top of the page

Currently working on a web project, I would like to set up a sticky part on my website
that could be always available. I tried different things but nothing worked.

My structure is like below

<body>
<wrap>
<header></header>
<nav></nav>
<container></container>
</wrap>
<footer></footer>
</body>


If you prefer a scheme, it's this link:
http://s21.postimg.org/79tp8wu5z/structure_page.png

So I want to make my header nav and background (which is applied on body background) sticky on top of the page.

I know I need to use the fixed an relative position but nothing works except the background.

Here is my css:

body {
background: url(img/bg.jpg) no-repeat center center;
background-attachment: fixed;
background-position: top;
}

.wrap {
width: 960px;
margin: 0 auto;
}

#header {
height: 121px;
position: relative;
}

#footer {
height: 40px;
background-color: #146992;
position: relative;
}

.container {
position:relative;
}

#menu {
position:relative;
height: 45px;
}


Thanks for your help.

Answer

You haven't fixed the position of the nav bar. Try using

#nav
 {
 background-color:#262626;
 width:100%;
 height:50px;
 box-shadow: 0px 1px 50px #5E5E5E;
 position:fixed;
 top:0px;
}

Or you can use Twitter Bootstrap for startup.

Look here and here.