Header Position : Fixed (Hides MainNav)

[Art.S]

Hi,

Could someone please help, I would like to fix my website's header when scrolling.
However, when I do the following:

.header-default #header-main {
    background: white;
    z-index: 1;
    position: fixed;
    padding: 20px 0;
    width: 100%;
}

The Result is having a fixed header.
However, all the content goes up and moves behind the header. This essentially hides my MainNav and cuts into a bit of the Image slider. I have attached some screen shots Below. Any help would be highly appreciated.

01 - How it is Normally.
02 - What happens after applying the code for fixed header

Website URL: www.atlas.com.bd

 

 

[JeredBolton]

To make this work as described you need to change the css for a number of elements:

 

.header-default .topbar {

    background-color: #fbfbfb;

    border-bottom: 1px solid #dce0e2;

    color: #92989a;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 150;

}

 

.header-default #header-main {

    background: white none repeat scroll 0 0;

    padding: 20px 0;

    position: fixed;

    top: 47px;

    width: 100%;

    z-index: 150;

}

 

#pts-mainnav {

    color: #999999;

    margin-top: 187px;

}

 

You need a high z-index for these elements to ensure they stay on top of other page content.