Fixed header stays on top of wrapper

Question

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.stack.imgur.com/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.

Try using `padding-top` on the wrapper instead of `margin-top` — Paulie_D, Sep 04 '14 at 11:04
Tried it, but the idea is that de wrapper is 100px below the header. — user2586633, Sep 04 '14 at 11:19

score 0 · Accepted Answer · answered Sep 04 '14 at 11:17

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

Fixed header stays on top of wrapper

1 Answers1