Search code examples
cssfixed

Fixed header stays on top of wrapper

I'm trying to build a Wordpress site with a fixed header. So far so good. The header is ok, but the wrapper is the problem now. When I give the wrapper a margin-top: 100px the header wil go down 100px and header will stay above the wrapper (See image).

https://i.sstatic.net/18sOL.jpg . The transparent white is the header and it stays above the wrapper.

Code link: http://jsfiddle.net/b1u83a7z/enter code here .Here you can see that the header is on top of the wrapper the wrapper should have a margin-top of 100px.

Solution

  • Add header styles the top property to define at what position should be placed:

    #top {
    top:0;   <-- Added
    width:100%;
    height:60px;
    margin:0 auto;
    background-color:rgba(255, 255, 255, 0.9);
    position:fixed;
    z-index:500;
    border-bottom:1px solid #DEDEDE;
}

    Updated JSFiddle