Search code examples
csspositionfixed

How do i get my fixed element to stand alone without going on top of the other content?

I have at the top of my page a div dedicated as a top bar. I want the position to be fixed so that it stays in the same place when scrolling. BUT.. once I apply the fixed positioning, all of the content moves up by about 30px (the size of the bar) and sits behind the bar making the header appear smaller in height than what it should be.

Once the css for position:fixed is removed from #topbar the content moves down to it's desired place code via codepen: http://codepen.io/Hafkamp/pen/jabmE

css

#topbar{position:fixed}
Solution

  • To the #topbar, add CSS:

    #topbar{
    top:0;
}

    Also, to the #header add:

    #header{
    margin-top:30px;
}

    This way, your #topbar will stick to the top of the page and the following html will be pushed down by 30px(the height of the #topbar)