Loric- Loric- - 1 year ago 71
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


If you prefer a scheme, it's this link:

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 {

#menu {
height: 45px;

Thanks for your help.

Answer Source

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

 box-shadow: 0px 1px 50px #5E5E5E;

Or you can use Twitter Bootstrap for startup.

Look here and here.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download